import React from "react";

interface CalloutProps {
  type?: "info" | "success" | "warning" | "tip";
  title?: string;
  children: React.ReactNode;
}

export default function Callout({
  type = "info",
  title,
  children,
}: CalloutProps) {
  const styles = {
    info: {
      bg: "bg-blue-50 dark:bg-blue-950/30",
      border: "border-blue-500",
      icon: "💡",
      iconBg: "bg-blue-500",
    },
    success: {
      bg: "bg-green-50 dark:bg-green-950/30",
      border: "border-green-500",
      icon: "✅",
      iconBg: "bg-green-500",
    },
    warning: {
      bg: "bg-orange-50 dark:bg-orange-950/30",
      border: "border-orange-500",
      icon: "⚠️",
      iconBg: "bg-orange-500",
    },
    tip: {
      bg: "bg-purple-50 dark:bg-purple-950/30",
      border: "border-purple-500",
      icon: "💡",
      iconBg: "bg-purple-500",
    },
  };

  const style = styles[type];

  return (
    <div
      className={`${style.bg} border-l-4 ${style.border} rounded-r-xl p-6 my-8 shadow-md`}
    >
      <div className="flex items-start gap-4">
        <div
          className={`${style.iconBg} w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 shadow-lg`}
        >
          <span className="text-white text-lg">{style.icon}</span>
        </div>
        <div className="flex-grow">
          {title && (
            <h4 className="font-bold text-gray-900 dark:text-white text-lg mb-2">
              {title}
            </h4>
          )}
          <div className="text-gray-700 dark:text-gray-300 leading-relaxed">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}