import type { ReactNode } from "react";
import {
  AlertCircle,
  CheckCircle2,
  TriangleAlert,
  XCircle
} from "lucide-react";

export type AlertVariant = "info" | "success" | "warning" | "danger";

export type AlertBannerProps = {
  title: string;
  description: string;
  variant?: AlertVariant;
  icon?: ReactNode;
};

const variantStyles: Record<AlertVariant, string> = {
  info: "border-primary/30 bg-primary/10",
  success: "border-emerald-500/30 bg-emerald-500/10",
  warning: "border-amber-500/30 bg-amber-500/10",
  danger: "border-destructive/40 bg-destructive/10"
};

const iconStyles: Record<AlertVariant, string> = {
  info: "text-primary",
  success: "text-emerald-500",
  warning: "text-amber-500",
  danger: "text-destructive"
};

const variantIcons: Record<AlertVariant, typeof AlertCircle> = {
  info: AlertCircle,
  success: CheckCircle2,
  warning: TriangleAlert,
  danger: XCircle
};

export function AlertBanner({
  title,
  description,
  variant = "info",
  icon
}: AlertBannerProps) {
  const DefaultIcon = variantIcons[variant];

  return (
    <div
      className={`rounded-2xl border px-5 py-4 ${variantStyles[variant]}`}
      role="status"
    >
      <div className="flex items-start gap-3">
        <div className={`mt-0.5 ${iconStyles[variant]}`}>
          {icon ?? <DefaultIcon className="h-5 w-5" />}
        </div>
        <div className="space-y-1">
          <p className="text-sm font-semibold">{title}</p>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
    </div>
  );
}