import { type HTMLAttributes, type ReactNode } from "react";
import { CheckCircle2, AlertTriangle, Info, XCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export type StatusBannerVariant = "success" | "warning" | "error" | "info";

export interface StatusBannerProps extends HTMLAttributes<HTMLDivElement> {
  variant?: StatusBannerVariant;
  title: string;
  description?: string;
  icon?: ReactNode;
}

const variantConfig: Record<
  StatusBannerVariant,
  { container: string; icon: typeof CheckCircle2; iconClass: string }
> = {
  success: {
    container: "bg-success-bg border-success-green/20 text-ink",
    icon: CheckCircle2,
    iconClass: "text-success-green",
  },
  warning: {
    container: "bg-amber-50 border-amber-200 text-ink",
    icon: AlertTriangle,
    iconClass: "text-warning-amber",
  },
  error: {
    container: "bg-red-50 border-red-200 text-ink",
    icon: XCircle,
    iconClass: "text-red-600",
  },
  info: {
    container: "bg-blue-50 border-blue/20 text-ink",
    icon: Info,
    iconClass: "text-blue-deep",
  },
};

export function StatusBanner({
  variant = "success",
  title,
  description,
  icon,
  className,
  ...props
}: StatusBannerProps) {
  const config = variantConfig[variant];
  const Icon = config.icon;

  return (
    <div
      role="status"
      className={cn(
        "flex items-start gap-3 rounded-card border px-4 py-3",
        config.container,
        className,
      )}
      {...props}
    >
      <span className={cn("mt-0.5 shrink-0", config.iconClass)} aria-hidden="true">
        {icon ?? <Icon className="size-5" />}
      </span>
      <div className="min-w-0">
        <p className="font-onest text-sm font-semibold">{title}</p>
        {description ? (
          <p className="mt-0.5 font-inter text-sm text-muted">{description}</p>
        ) : null}
      </div>
    </div>
  );
}