import * as React from "react";
import { AlertCircle, CheckCircle2, Info, TriangleAlert } from "lucide-react";
import { cn } from "@/lib/cn";

type AlertVariant = "info" | "success" | "warning" | "destructive";

const icons: Record<AlertVariant, React.ComponentType<{ className?: string }>> = {
  info: Info,
  success: CheckCircle2,
  warning: TriangleAlert,
  destructive: AlertCircle,
};

const styles: Record<AlertVariant, string> = {
  info: "border-primary/15 bg-primary-soft/60 text-primary",
  success: "border-success/20 bg-success-soft/70 text-success",
  warning: "border-warning/25 bg-warning-soft/70 text-warning",
  destructive: "border-destructive/20 bg-destructive-soft text-destructive",
};

export function Alert({
  variant = "info",
  title,
  children,
  className,
  icon: IconOverride,
}: {
  variant?: AlertVariant;
  title?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
  icon?: React.ComponentType<{ className?: string }>;
}) {
  const Icon = IconOverride ?? icons[variant];
  return (
    <div
      role={variant === "destructive" ? "alert" : undefined}
      className={cn("flex gap-3 rounded-lg border px-4 py-3 text-sm", styles[variant], className)}
    >
      <Icon className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
      <div className="min-w-0 space-y-1">
        {title ? <p className="font-medium leading-tight">{title}</p> : null}
        {children ? <div className="text-inherit/90 leading-relaxed">{children}</div> : null}
      </div>
    </div>
  );
}