import { ReactNode } from 'react';
import { X, Info, CheckCircle, AlertTriangle, AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';

export interface AlertProps {
  variant?: 'info' | 'success' | 'warning' | 'error';
  title?: string;
  children: ReactNode;
  onClose?: () => void;
  dismissible?: boolean;
  className?: string;
}

const ALERT_ICONS = {
  info: Info,
  success: CheckCircle,
  warning: AlertTriangle,
  error: AlertCircle,
};

const ALERT_STYLES = {
  info: 'bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-200',
  success:
    'bg-green-50 border-green-200 text-green-900 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200',
  warning:
    'bg-yellow-50 border-yellow-200 text-yellow-900 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-200',
  error:
    'bg-red-50 border-red-200 text-red-900 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200',
};

const ICON_STYLES = {
  info: 'text-blue-600 dark:text-blue-400',
  success: 'text-green-600 dark:text-green-400',
  warning: 'text-yellow-600 dark:text-yellow-400',
  error: 'text-red-600 dark:text-red-400',
};

/**
 * Composant Alert pour afficher des messages d'information, d'avertissement ou d'erreur.
 */
export function Alert({
  variant = 'info',
  title,
  children,
  onClose,
  dismissible = false,
  className,
}: AlertProps) {
  const Icon = ALERT_ICONS[variant];

  return (
    <div
      role="alert"
      className={cn(
        'relative rounded-lg border p-4',
        ALERT_STYLES[variant],
        className,
      )}
    >
      <div className="flex items-start gap-3">
        <Icon
          className={cn('h-5 w-5 flex-shrink-0 mt-0.5', ICON_STYLES[variant])}
        />
        <div className="flex-1 min-w-0">
          {title && (
            <h3 className="mb-1 font-semibold leading-none tracking-tight">
              {title}
            </h3>
          )}
          <div className="text-sm [&_p]:leading-relaxed">{children}</div>
        </div>
        {dismissible && onClose && (
          <button
            onClick={onClose}
            className="flex-shrink-0 rounded-md p-1 text-current opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2"
            aria-label="Fermer"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>
    </div>
  );
}
