import { AlertTriangle, CheckCircle, Info, LucideIcon, XCircle } from 'lucide-react';
import React from 'react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Stack } from './Stack';
import { Surface } from './Surface';
import { Text } from './Text';

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

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

export function InfoBanner({ 
  type = 'info', 
  title,
  children,
  icon: CustomIcon,
}: InfoBannerProps) {
  const bannerConfig: Record<BannerType, { 
    icon: LucideIcon; 
    bg: string; 
    border: string; 
    titleColor: string;
    iconColor: string;
  }> = {
    info: {
      icon: Info,
      bg: 'rgba(38, 38, 38, 0.3)',
      border: 'rgba(38, 38, 38, 0.5)',
      titleColor: 'text-gray-300',
      iconColor: '#9ca3af',
    },
    warning: {
      icon: AlertTriangle,
      bg: 'rgba(245, 158, 11, 0.1)',
      border: 'rgba(245, 158, 11, 0.3)',
      titleColor: 'text-warning-amber',
      iconColor: '#f59e0b',
    },
    success: {
      icon: CheckCircle,
      bg: 'rgba(16, 185, 129, 0.1)',
      border: 'rgba(16, 185, 129, 0.3)',
      titleColor: 'text-performance-green',
      iconColor: '#10b981',
    },
    error: {
      icon: XCircle,
      bg: 'rgba(239, 68, 68, 0.1)',
      border: 'rgba(239, 68, 68, 0.3)',
      titleColor: 'text-error-red',
      iconColor: '#ef4444',
    },
  };

  const config = bannerConfig[type];
  const BannerIcon = CustomIcon || config.icon;
  
  return (
    <Surface 
      variant="muted" 
      rounded="lg" 
      border 
      padding={4} 
      style={{ backgroundColor: config.bg, borderColor: config.border }}
    >
      <Stack direction="row" align="start" gap={3}>
        <Icon icon={BannerIcon} size={5} color={config.iconColor} />
        <Box style={{ flex: 1 }}>
          {title && (
            <Text weight="medium" color={config.titleColor as any} block mb={1}>{title}</Text>
          )}
          <Text size="sm" color="text-gray-400" block>{children}</Text>
        </Box>
      </Stack>
    </Surface>
  );
}