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

export interface InfoBoxProps {
  title: string;
  description: string;
  icon: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  variant?: string; // Alias for intent
}

export const InfoBox = ({ 
  title, 
  description, 
  icon, 
  intent = 'primary',
  variant 
}: InfoBoxProps) => {
  const activeIntent = (variant || intent) as any;
  
  const configMap: any = {
    primary: {
      bg: 'rgba(25, 140, 255, 0.05)',
      border: 'rgba(25, 140, 255, 0.2)',
    },
    success: {
      bg: 'rgba(111, 227, 122, 0.05)',
      border: 'rgba(111, 227, 122, 0.2)',
    },
    warning: {
      bg: 'rgba(255, 190, 77, 0.05)',
      border: 'rgba(255, 190, 77, 0.2)',
    },
    critical: {
      bg: 'rgba(227, 92, 92, 0.05)',
      border: 'rgba(227, 92, 92, 0.2)',
    },
    telemetry: {
      bg: 'rgba(78, 212, 224, 0.05)',
      border: 'rgba(78, 212, 224, 0.2)',
    },
  };

  const config = configMap[activeIntent] || configMap.primary;

  return (
    <Surface 
      variant="muted" 
      rounded="xl" 
      padding={4} 
      style={{ backgroundColor: config.bg, border: `1px solid ${config.border}` }}
    >
      <Box display="flex" alignItems="start" gap={4}>
        <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}>
          <Icon icon={icon} size={5} intent={activeIntent} />
        </Surface>
        <Box>
          <Text weight="medium" variant="high" block>
            {title}
          </Text>
          <Text size="sm" variant="low" block marginTop={1}>
            {description}
          </Text>
        </Box>
      </Box>
    </Surface>
  );
};