import { cn } from "@/lib/utils";
import {
  IconAlertTriangle,
  IconBulb,
  IconCircleCheck,
  IconInfoSmall,
} from "@tabler/icons-react";

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

const calloutConfig = {
  info: {
    icon: IconInfoSmall,
    accent: "from-orange-500 to-orange-400",
    bg: "bg-gradient-to-br from-orange-50/80 to-white",
    ring: "ring-orange-100",
    iconBg: "bg-orange-500",
    title: "text-gray-900",
    body: "text-gray-600",
  },
  warning: {
    icon: IconAlertTriangle,
    accent: "from-amber-500 to-yellow-400",
    bg: "bg-gradient-to-br from-amber-50/80 to-white",
    ring: "ring-amber-100",
    iconBg: "bg-amber-500",
    title: "text-gray-900",
    body: "text-gray-600",
  },
  success: {
    icon: IconCircleCheck,
    accent: "from-emerald-500 to-emerald-400",
    bg: "bg-gradient-to-br from-emerald-50/80 to-white",
    ring: "ring-emerald-100",
    iconBg: "bg-emerald-500",
    title: "text-gray-900",
    body: "text-gray-600",
  },
  tip: {
    icon: IconBulb,
    accent: "from-orange-500 to-orange-400",
    bg: "bg-gradient-to-br from-orange-50/60 to-white",
    ring: "ring-orange-100",
    iconBg: "bg-orange-500",
    title: "text-gray-900",
    body: "text-gray-600",
  },
};

export default function Callout({
  type = "info",
  title,
  children,
}: CalloutProps) {
  const config = calloutConfig[type];
  const Icon = config.icon;

  return (
    <div
      className={cn(
        "group relative my-8 overflow-hidden rounded-xl ring-1",
        config.bg,
        config.ring,
      )}
    >
      {/* Left accent bar */}
      <div
        className={cn(
          "absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b",
          config.accent,
        )}
      />

      <div className="flex gap-4 px-5 py-4 pl-6">
        {/* Icon */}
        <div
          className={cn(
            "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg",
            config.iconBg,
          )}
        >
          <Icon className="h-4 w-4 text-white" strokeWidth={2.5} aria-hidden="true" />
        </div>

        {/* Content */}
        <div className="flex-1 min-w-0">
          {title && (
            <p className={cn("mb-1 text-base font-semibold leading-snug", config.title)}>
              {title}
            </p>
          )}
          <div className={cn("text-sm leading-relaxed [&>p]:m-0", config.body)}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}