import { Icon } from '../Icon/Icon';

export const Alert = ({
  variant = 'info',
  title,
  children,
  onClose,
  className = '',
  ...props
}) => {
  const variantClasses = {
    info: 'bg-blue-50 border-blue-200 text-blue-800',
    success: 'bg-green-50 border-green-200 text-green-800',
    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
    danger: 'bg-red-50 border-red-200 text-red-800',
  };

  const iconMap = {
    info: 'InformationCircleIcon',
    success: 'CheckCircleIcon',
    warning: 'ExclamationTriangleIcon',
    danger: 'XCircleIcon',
  };

  const classes = `border rounded-lg p-4 ${variantClasses[variant]} ${className}`;

  return (
    <div className={classes} role="alert" {...props}>
      <div className="flex items-start">
        <Icon
          name={iconMap[variant]}
          className="mr-3 h-5 w-5 flex-shrink-0"
        />
        <div className="flex-1">
          {title && <h3 className="font-semibold mb-1">{title}</h3>}
          <div>{children}</div>
        </div>
        {onClose && (
          <button
            onClick={onClose}
            className="ml-4 text-current opacity-50 hover:opacity-75"
          >
            <Icon name="XMarkIcon" className="h-5 w-5" />
          </button>
        )}
      </div>
    </div>
  );
};

export default Alert;

