import React from "react";
import { AlertCircle, CheckCircle2, AlertTriangle, Info, X } from "lucide-react";

interface AlertBannerProps {
  type?: "info" | "success" | "warning" | "danger";
  title?: string;
  message: string;
  onClose?: () => void;
  action?: React.ReactNode;
}

export const AlertBanner: React.FC<AlertBannerProps> = ({
  type = "info",
  title,
  message,
  onClose,
  action,
}) => {
  const styles = {
    info: {
      container: "bg-sky-950/60 border-sky-800/70 text-sky-200 shadow-xs shadow-sky-950/50",
      icon: <Info className="w-5 h-5 text-sky-400 shrink-0" />,
    },
    success: {
      container: "bg-emerald-950/60 border-emerald-800/70 text-emerald-200 shadow-xs shadow-emerald-950/50",
      icon: <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />,
    },
    warning: {
      container: "bg-amber-950/60 border-amber-800/70 text-amber-200 shadow-xs shadow-amber-950/50",
      icon: <AlertTriangle className="w-5 h-5 text-amber-400 shrink-0" />,
    },
    danger: {
      container: "bg-rose-950/60 border-rose-800/70 text-rose-200 shadow-xs shadow-rose-950/50",
      icon: <AlertCircle className="w-5 h-5 text-rose-400 shrink-0" />,
    },
  };

  const current = styles[type];

  return (
    <div className={`p-4 rounded-xl border flex items-start gap-3.5 ${current.container}`}>
      {current.icon}
      <div className="flex-1 text-sm">
        {title && <h4 className="font-bold mb-0.5 text-white">{title}</h4>}
        <p className="leading-relaxed opacity-95">{message}</p>
        {action && <div className="mt-2">{action}</div>}
      </div>
      {onClose && (
        <button
          onClick={onClose}
          className="text-slate-400 hover:text-white p-0.5 rounded transition-colors cursor-pointer"
          aria-label="Dismiss alert"
        >
          <X className="w-4 h-4" />
        </button>
      )}
    </div>
  );
};