aeroresolve_frontend/src/components/custom/CustomAlertBanner.tsx

import { type FC, useEffect } from "react";
import { WarningIcon, CheckCircleIcon, InfoIcon, XCircleIcon, XIcon } from '@phosphor-icons/react';

type AlertType = 'error' | 'success' | 'warning' | 'info';

interface AlertBannerProps {
  message: string;
  type?: AlertType;
  onClose?: () => void;
  autoClose?: boolean;
  duration?: number;
}

const alertConfig = {
  error: {
    icon: <XCircleIcon className="h-5 w-5" />,
    containerClasses: 'bg-red-50 border-red-500 text-red-800',
  },
  success: {
    icon: <CheckCircleIcon className="h-5 w-5" />,
    containerClasses: 'bg-green-50 border-green-500 text-green-800',
  },
  warning: {
    icon: <WarningIcon className="h-5 w-5" />,
    containerClasses: 'bg-yellow-50 border-yellow-500 text-yellow-800',
  },
  info: {
    icon: <InfoIcon className="h-5 w-5" />,
    containerClasses: 'bg-blue-50 border-blue-500 text-blue-800',
  },
};

const AlertBanner: FC<AlertBannerProps> = ({ 
  message, 
  type = 'error', 
  onClose,
  autoClose = true,
  duration = 5000
}) => {
  useEffect(() => {
    if (autoClose && message && onClose) {
      const timer = setTimeout(() => {
        onClose();
      }, duration);
      return () => clearTimeout(timer);
    }
  }, [message, autoClose, duration, onClose]);

  // If no message, don't render anything
  if (!message) {
    return null;
  }

  const { icon, containerClasses } = alertConfig[type as AlertType] || alertConfig.error;

  return (
    <div
      className={`flex items-center justify-between p-4 mb-4 text-sm rounded-md border-l-4 ${containerClasses} shadow-sm border border-gray-100 transition-all duration-500 animate-in fade-in slide-in-from-top-2`}
      role="alert"
    >
      <div className="flex items-center flex-1">
        <div className="mr-3 flex-shrink-0">{icon}</div>
        <div className="flex-1 min-w-0">
          <span className="font-medium">{message}</span>
        </div>
      </div>
      {onClose && (
        <button 
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            onClose();
          }}
          type="button"
          className="ml-4 p-1 rounded-full hover:bg-black/5 transition-colors focus:outline-none"
          aria-label="Close alert"
        >
          <XIcon className="h-4 w-4" />
        </button>
      )}
    </div>
  );
};

export default AlertBanner;