import type { ReactNode } from 'react';
import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';

type AlertVariant = 'error' | 'warn' | 'success' | 'info';

interface AlertBannerProps {
  variant: AlertVariant;
  title?: string;
  children: ReactNode;
}

const CONFIG: Record<AlertVariant, { cls: string; Icon: typeof AlertCircle; role: string }> = {
  error:   { cls: 'alert-error',   Icon: AlertCircle,   role: 'alert'  },
  warn:    { cls: 'alert-warn',    Icon: AlertTriangle, role: 'alert'  },
  success: { cls: 'alert-success', Icon: CheckCircle,   role: 'status' },
  info:    { cls: 'alert-info',    Icon: Info,          role: 'status' },
};

export function AlertBanner({ variant, title, children }: AlertBannerProps): JSX.Element {
  const { cls, Icon, role } = CONFIG[variant];
  return (
    <div role={role} className={cls}>
      <Icon size={16} aria-hidden className="mt-[2px] shrink-0" />
      <div className="flex flex-col gap-xxs text-[14px]">
        {title ? <span className="font-medium text-ink">{title}</span> : null}
        <span className="text-charcoal">{children}</span>
      </div>
    </div>
  );
}