// SPDX-License-Identifier: GPL-3.0-or-later

import { AlertCircle, CheckCircle, Info, AlertTriangle, X } from 'lucide-react';

interface AlertProps {
  type: 'info' | 'success' | 'warning' | 'error';
  title?: string;
  children: React.ReactNode;
  onClose?: () => void;
}

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

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

const iconColors = {
  info: 'text-blue-500',
  success: 'text-green-500',
  warning: 'text-yellow-500',
  error: 'text-red-500',
};

export default function Alert({ type, title, children, onClose }: AlertProps) {
  const Icon = icons[type];

  return (
    <div className={`rounded-lg border p-4 ${colors[type]}`}>
      <div className="flex">
        <Icon className={`h-5 w-5 flex-shrink-0 ${iconColors[type]}`} />
        <div className="ml-3 flex-1">
          {title && <h4 className="font-medium">{title}</h4>}
          <div className={title ? 'mt-1 text-sm opacity-90' : ''}>{children}</div>
        </div>
        {onClose && (
          <button
            onClick={onClose}
            className="ml-3 flex-shrink-0 opacity-50 hover:opacity-100 transition-opacity"
          >
            <X className="h-5 w-5" />
          </button>
        )}
      </div>
    </div>
  );
}
