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

interface InfoBannerProps {
  title?: string;
  message?: string;
  children?: React.ReactNode;
  variant?: 'info' | 'warning' | 'error' | 'success';
  type?: 'info' | 'warning' | 'error' | 'success';
  icon?: LucideIcon;
}

export function InfoBanner({ title, message, children, variant = 'info', type, icon }: InfoBannerProps) {
  const configs = {
    info: {
      bg: 'rgba(59, 130, 246, 0.1)',
      border: 'rgba(59, 130, 246, 0.2)',
      iconColor: 'rgb(96, 165, 250)',
      icon: Info
    },
    warning: {
      bg: 'rgba(245, 158, 11, 0.1)',
      border: 'rgba(245, 158, 11, 0.2)',
      iconColor: 'rgb(251, 191, 36)',
      icon: AlertTriangle
    },
    error: {
      bg: 'rgba(239, 68, 68, 0.1)',
      border: 'rgba(239, 68, 68, 0.2)',
      iconColor: 'rgb(248, 113, 113)',
      icon: AlertCircle
    },
    success: {
      bg: 'rgba(16, 185, 129, 0.1)',
      border: 'rgba(16, 185, 129, 0.2)',
      iconColor: 'rgb(52, 211, 153)',
      icon: CheckCircle
    }
  };

  const activeVariant = type || variant;
  const config = configs[activeVariant as keyof typeof configs] || configs.info;
  const BannerIcon = icon || config.icon;

  return (
    <Surface 
      variant="muted" 
      rounded="xl" 
      border 
      p={4} 
      backgroundColor={config.bg} 
      borderColor={config.border}
    >
      <Stack direction="row" align="start" gap={3}>
        <Icon icon={BannerIcon} size={5} color={config.iconColor} />
        <Box flex={1}>
          {title && (
            <Text weight="medium" color="text-white" block mb={1}>
              {title}
            </Text>
          )}
          {message && (
            <Text size="sm" color="text-gray-300" block>
              {message}
            </Text>
          )}
          {children}
        </Box>
      </Stack>
    </Surface>
  );
}