import React from 'react';

interface AlertProps {
  type: 'info' | 'success' | 'warning' | 'error';
  title: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
}

export function Alert({ type, title, className = '', children }: AlertProps) {
  const getTypeStyles = () => {
    switch (type) {
      case 'info':
        return {
          container: 'bg-blue-50 border-blue-200 text-blue-800',
          icon: 'ri-information-line text-blue-600'
        };
      case 'success':
        return {
          container: 'bg-green-50 border-green-200 text-green-800',
          icon: 'ri-checkbox-circle-line text-green-600'
        };
      case 'warning':
        return {
          container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
          icon: 'ri-alert-line text-yellow-600'
        };
      case 'error':
        return {
          container: 'bg-red-50 border-red-200 text-red-800',
          icon: 'ri-error-warning-line text-red-600'
        };
      default:
        return {
          container: 'bg-gray-50 border-gray-200 text-gray-800',
          icon: 'ri-information-line text-gray-600'
        };
    }
  };

  const styles = getTypeStyles();

  return (
    <div 
      className={`border rounded-md p-3 ${styles.container} ${className}`}
      role="alert"
    >
      <div className="flex">
        <div className="flex-shrink-0">
          <i className={`${styles.icon} mr-2 text-lg`}></i>
        </div>
        <div>
          <div className="font-medium">{title}</div>
          {children && <div className="mt-1 text-sm">{children}</div>}
        </div>
      </div>
    </div>
  );
}