import * as React from "react";
import { AlertTriangle, CheckCircle2, Info, XCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export function Alert({ variant = "info", title, children, className, action }: { variant?: "info" | "success" | "warning" | "danger"; title?: React.ReactNode; children?: React.ReactNode; className?: string; action?: React.ReactNode }) {
  const Icon = variant === "success" ? CheckCircle2 : variant === "warning" ? AlertTriangle : variant === "danger" ? XCircle : Info;
  return (
    <div
      role={variant === "danger" ? "alert" : "status"}
      className={cn(
        "flex items-start gap-3 rounded-lg border px-4 py-3 text-[13.5px] leading-relaxed",
        variant === "info" && "border-info/20 bg-info-soft text-fg",
        variant === "success" && "border-success/20 bg-success-soft text-fg",
        variant === "warning" && "border-warning/25 bg-warning-soft text-fg",
        variant === "danger" && "border-danger/25 bg-danger-soft text-fg",
        className,
      )}
    >
      <Icon className={cn("mt-0.5 size-4 shrink-0", variant === "info" && "text-info", variant === "success" && "text-success", variant === "warning" && "text-warning", variant === "danger" && "text-danger")} aria-hidden />
      <div className="min-w-0 flex-1">
        {title ? <div className="font-medium">{title}</div> : null}
        {children ? <div className={cn(title && "mt-0.5 text-fg-muted")}>{children}</div> : null}
      </div>
      {action ? <div className="shrink-0">{action}</div> : null}
    </div>
  );
}