/**
 * ErrorBanner - UI component for displaying error messages
 * 
 * Pure UI element for error display in templates and components.
 * No business logic, just presentation.
 */

export interface ErrorBannerProps {
  message: string;
  title?: string;
  variant?: 'error' | 'warning' | 'info';
}

export function ErrorBanner({ message, title, variant = 'error' }: ErrorBannerProps) {
  const baseClasses = 'px-4 py-3 rounded-lg border flex items-start gap-3';
  
  const variantClasses = {
    error: 'bg-racing-red/10 border-racing-red text-racing-red',
    warning: 'bg-yellow-500/10 border-yellow-500 text-yellow-300',
    info: 'bg-primary-blue/10 border-primary-blue text-primary-blue',
  };

  return (
    <div className={`${baseClasses} ${variantClasses[variant]}`}>
      <div className="flex-1">
        {title && <div className="font-medium">{title}</div>}
        <div className="text-sm opacity-90">{message}</div>
      </div>
    </div>
  );
}