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

const icons: Record<AlertVariant, React.ElementType> = {
  info: Info,
  success: CheckCircle2,
  warning: AlertTriangle,
  error: XCircle,
};

const styles: Record<AlertVariant, string> = {
  info: "bg-info-bg text-info border-info/25",
  success: "bg-success-bg text-success border-success/25",
  warning: "bg-warning-bg text-warning border-warning/25",
  error: "bg-error-bg text-error border-error/25",
};

export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: AlertVariant;
  title: string;
}

export function Alert({ variant = "info", title, className, children, ...props }: AlertProps) {
  const Icon = icons[variant];
  return (
    <div
      role={variant === "error" ? "alert" : "status"}
      className={cn("flex gap-3 rounded border px-4 py-3.5", styles[variant], className)}
      {...props}
    >
      <Icon className="mt-0.5 size-4.5 shrink-0" aria-hidden="true" />
      <div className="text-body-sm text-ink">
        <p className="font-semibold">{title}</p>
        {children && <div className="mt-1 text-ink-soft">{children}</div>}
      </div>
    </div>
  );
}