import React from 'react';
import { Surface } from './Surface';
import { Stack } from './Stack';
import { Box } from './Box';
import { Icon } from './Icon';
import { Text } from './Text';
import { LucideIcon } from 'lucide-react';

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

export function InfoBox({ icon, title, description, variant = 'default' }: InfoBoxProps) {
  const variantColors = {
    primary: {
      bg: 'rgba(59, 130, 246, 0.1)',
      border: '#3b82f6',
      text: '#3b82f6',
      icon: '#3b82f6'
    },
    success: {
      bg: 'rgba(16, 185, 129, 0.1)',
      border: '#10b981',
      text: '#10b981',
      icon: '#10b981'
    },
    warning: {
      bg: 'rgba(245, 158, 11, 0.1)',
      border: '#f59e0b',
      text: '#f59e0b',
      icon: '#f59e0b'
    },
    default: {
      bg: 'rgba(38, 38, 38, 0.3)',
      border: '#262626',
      text: 'white',
      icon: '#9ca3af'
    }
  };

  const colors = variantColors[variant];

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