import React, { useState } from 'react';
import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react';

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

interface AlertProps {
  variant: AlertVariant;
  title?: string;
  children: React.ReactNode;
  dismissible?: boolean;
}

const variantStyles: Record<AlertVariant, { 
  container: string; 
  border: string; 
  icon: React.ElementType; 
  iconColor: string 
}> = {
  info: {
    container: 'bg-blue-50 text-blue-800',
    border: 'border-blue-200',
    icon: Info,
    iconColor: 'text-blue-500',
  },
  success: {
    container: 'bg-green-50 text-green-800',
    border: 'border-green-200',
    icon: CheckCircle,
    iconColor: 'text-green-500',
  },
  warning: {
    container: 'bg-yellow-50 text-yellow-800',
    border: 'border-yellow-200',
    icon: AlertTriangle,
    iconColor: 'text-yellow-500',
  },
  error: {
    container: 'bg-red-50 text-red-800',
    border: 'border-red-200',
    icon: XCircle,
    iconColor: 'text-red-500',
  },
};

export default function Alert({ variant, title, children, dismissible = false }: AlertProps) {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) return null;

  const style = variantStyles[variant];
  const Icon = style.icon;

  return (
    <div className={`relative p-4 rounded-lg border ${style.container} ${style.border} flex gap-3 items-start`}>
      <div className="flex-shrink-0 mt-0.5">
        <Icon className={`w-5 h-5 ${style.iconColor}`} />
      </div>
      
      <div className="flex-1">
        {title && (
          <strong className="block font-semibold mb-1">
            {title}
          </strong>
        )}
        <div className="text-sm opacity-90">
          {children}
        </div>
      </div>

      {dismissible && (
        <button 
          onClick={() => setIsVisible(false)}
          className="flex-shrink-0 p-1 rounded-md hover:bg-black/5 transition-colors"
          aria-label="Dismiss alert"
        >
          <X className="w-4 h-4 opacity-60" />
        </button>
      )}
    </div>
  );
}