import { Lightbulb, Info, AlertTriangle } from "lucide-react";

interface HelpCalloutProps {
  type?: "tip" | "note" | "warning";
  children: React.ReactNode;
}

const calloutConfig = {
  tip: {
    icon: Lightbulb,
    label: "Tip",
    classes: "bg-[#EDF2ED] border-[#6B8F71]/20 text-[#2D3436]",
    iconClass: "text-[#6B8F71]",
  },
  note: {
    icon: Info,
    label: "Note",
    classes: "bg-[#F2EFE9] border-[#C4856A]/20 text-[#2D3436]",
    iconClass: "text-[#8A8F87]",
  },
  warning: {
    icon: AlertTriangle,
    label: "Warning",
    classes: "bg-[#FDF3EE] border-[#C4856A]/30 text-[#2D3436]",
    iconClass: "text-[#C4856A]",
  },
};

export function HelpCallout({ type = "tip", children }: HelpCalloutProps) {
  const config = calloutConfig[type];
  const Icon = config.icon;

  return (
    <div
      className={`my-6 flex gap-3 rounded-xl border p-4 ${config.classes}`}
    >
      <Icon className={`size-5 shrink-0 mt-0.5 ${config.iconClass}`} />
      <div className="text-sm leading-relaxed">{children}</div>
    </div>
  );
}
