'use client';

import React from 'react';
import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';

type BannerType = 'info' | 'warning' | 'success' | 'error';

interface InfoBannerProps {
  type?: BannerType;
  title?: string;
  children: React.ReactNode;
  icon?: React.ElementType;
}

const bannerConfig: Record<BannerType, { 
  icon: React.ElementType; 
  bg: string; 
  border: string; 
  titleColor: string;
}> = {
  info: {
    icon: Info,
    bg: 'bg-iron-gray/30',
    border: 'border-charcoal-outline/50',
    titleColor: 'text-gray-300',
  },
  warning: {
    icon: AlertTriangle,
    bg: 'bg-warning-amber/10',
    border: 'border-warning-amber/30',
    titleColor: 'text-warning-amber',
  },
  success: {
    icon: CheckCircle,
    bg: 'bg-performance-green/10',
    border: 'border-performance-green/30',
    titleColor: 'text-performance-green',
  },
  error: {
    icon: XCircle,
    bg: 'bg-racing-red/10',
    border: 'border-racing-red/30',
    titleColor: 'text-racing-red',
  },
};

/**
 * Info banner component for displaying contextual information, warnings, or notices.
 * Used throughout the app for important messages and helper text.
 */
export default function InfoBanner({ 
  type = 'info', 
  title,
  children,
  icon: CustomIcon,
}: InfoBannerProps) {
  const config = bannerConfig[type];
  const Icon = CustomIcon || config.icon;
  
  return (
    <div className={`flex items-start gap-3 p-4 rounded-lg border ${config.bg} ${config.border}`}>
      <Icon className="w-5 h-5 text-gray-500 flex-shrink-0 mt-0.5" />
      <div className="text-sm text-gray-400">
        {title && (
          <p className={`font-medium mb-1 ${config.titleColor}`}>{title}</p>
        )}
        {children}
      </div>
    </div>
  );
}