import { AlertTriangle, Info, Lightbulb, XCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

type CalloutType = "info" | "warning" | "tip" | "danger";

const config: Record<CalloutType, {
  icon: React.ElementType;
  bg: string;
  border: string;
  iconColor: string;
  titleColor: string;
  label: string;
}> = {
  warning: {
    icon: AlertTriangle,
    bg: "bg-amber-500/10",
    border: "border-amber-500/20",
    iconColor: "text-amber-400",
    titleColor: "text-amber-300",
    label: "Warning",
  },
  info: {
    icon: Info,
    bg: "bg-accent-hover/10",
    border: "border-accent-hover/20",
    iconColor: "text-accent-text",
    titleColor: "text-accent-text/80",
    label: "Note",
  },
  tip: {
    icon: Lightbulb,
    bg: "bg-emerald-500/10",
    border: "border-emerald-500/20",
    iconColor: "text-emerald-400",
    titleColor: "text-emerald-300",
    label: "Tip",
  },
  danger: {
    icon: XCircle,
    bg: "bg-red-500/10",
    border: "border-red-500/20",
    iconColor: "text-red-400",
    titleColor: "text-red-300",
    label: "Danger",
  },
};

interface CalloutProps {
  type?: CalloutType;
  title?: string;
  children: ReactNode;
}

export function Callout({ type = "info", title, children }: CalloutProps) {
  const c = config[type];
  const Icon = c.icon;
  return (
    <div className={cn("flex gap-3.5 p-4 rounded-xl border my-4", c.bg, c.border)}>
      <Icon className={cn("w-4 h-4 shrink-0 mt-0.5", c.iconColor)} />
      <div className="min-w-0 text-sm leading-relaxed text-zinc-300">
        {title && (
          <span className={cn("font-semibold block mb-1", c.titleColor)}>{title}</span>
        )}
        {!title && (
          <span className={cn("font-semibold", c.titleColor)}>{c.label}: </span>
        )}
        {children}
      </div>
    </div>
  );
}