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 { LucideIcon } from 'lucide-react';

interface InfoBoxProps {
  title: string;
  description: string;
  icon: LucideIcon;
  variant?: 'info' | 'warning' | 'error' | 'success';
}

export function InfoBox({ title, description, icon, variant = 'info' }: InfoBoxProps) {
  const configs = {
    info: {
      bg: 'rgba(59, 130, 246, 0.1)',
      border: 'rgba(59, 130, 246, 0.2)',
      icon: 'rgb(96, 165, 250)',
      text: 'text-white'
    },
    warning: {
      bg: 'rgba(245, 158, 11, 0.1)',
      border: 'rgba(245, 158, 11, 0.2)',
      icon: 'rgb(251, 191, 36)',
      text: 'text-white'
    },
    error: {
      bg: 'rgba(239, 68, 68, 0.1)',
      border: 'rgba(239, 68, 68, 0.2)',
      icon: 'rgb(248, 113, 113)',
      text: 'text-white'
    },
    success: {
      bg: 'rgba(16, 185, 129, 0.1)',
      border: 'rgba(16, 185, 129, 0.2)',
      icon: 'rgb(52, 211, 153)',
      text: 'text-white'
    }
  };

  const colors = configs[variant];

  return (
    <Surface 
      variant="muted" 
      rounded="xl" 
      border 
      p={4} 
      backgroundColor={colors.bg} 
      borderColor={colors.border}
    >
      <Stack direction="row" align="start" gap={3}>
        <Surface variant="muted" rounded="lg" p={2} bg="bg-white/5">
          <Icon icon={icon} size={5} color={colors.icon} />
        </Surface>
        <Box>
          <Text weight="medium" color={colors.text} block>{title}</Text>
          <Text size="sm" color="text-gray-400" block mt={1}>{description}</Text>
        </Box>
      </Stack>
    </Surface>
  );
}