import clsx from "clsx";
import { BiErrorCircle } from "react-icons/bi";
import { IoInformationCircle } from "react-icons/io5";

export interface AlertItem {
  variant: "info" | "error";
  description: string;
  tag?: string;
}

interface Props {
  alerts: AlertItem[];
  className?: string;
}

const Alert: React.FC<Props> = ({ alerts, className }) => {
  const hasError = alerts.some(alert => alert.variant === "error");
  const alertsToShow = hasError ? alerts.filter(alert => alert.variant === "error") : alerts;

  if (alertsToShow.length === 0) return null;
  
  return (
    <div className={clsx("space-y-2", className)}>
      {alertsToShow.map((alert, index) => (
        <div
          key={index}
          className={clsx(
            "border rounded-xl flex items-center gap-2 py-2 px-4",
            {
              'bg-amber-50': alert.variant === 'info',
              'bg-red-50': alert.variant === 'error'
            }
          )}
        >
          {alert.variant === 'info' ? (
            <IoInformationCircle
              className="h-5 w-5 text-amber-700"
            />
          ) : (
            <BiErrorCircle
              className="h-5 w-5 text-red-700"
            />
          )}
          <p
            className={clsx(
              "font-medium py-0.5",
              {
                'text-amber-700': alert.variant === 'info',
                'text-red-700': alert.variant === 'error'
              }
            )}
          >
            {alert.description}
          </p>
        </div>
      ))}
    </div>
  );
};

export default Alert;
