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

export interface InfoBannerProps {
  children?: ReactNode;
  variant?: 'info' | 'warning' | 'success' | 'critical';
  type?: 'info' | 'warning' | 'success' | 'critical'; // Alias for variant
  title?: string;
}

export const InfoBanner = ({ 
  children, 
  variant,
  type,
  title
}: InfoBannerProps) => {
  const activeVariant = variant || type || 'info';
  
  const config = {
    info: {
      icon: Info,
      intent: 'primary' as const,
      bg: 'rgba(25, 140, 255, 0.05)',
      border: 'rgba(25, 140, 255, 0.2)',
    },
    warning: {
      icon: AlertTriangle,
      intent: 'warning' as const,
      bg: 'rgba(255, 190, 77, 0.05)',
      border: 'rgba(255, 190, 77, 0.2)',
    },
    success: {
      icon: CheckCircle,
      intent: 'success' as const,
      bg: 'rgba(111, 227, 122, 0.05)',
      border: 'rgba(111, 227, 122, 0.2)',
    },
    critical: {
      icon: XCircle,
      intent: 'critical' as const,
      bg: 'rgba(227, 92, 92, 0.05)',
      border: 'rgba(227, 92, 92, 0.2)',
    },
  }[activeVariant];

  return (
    <Surface 
      variant="muted" 
      rounded="lg" 
      padding={4} 
      style={{ backgroundColor: config.bg, border: `1px solid ${config.border}` }}
    >
      <Box display="flex" alignItems="start" gap={3}>
        <Icon icon={config.icon} size={5} intent={config.intent} />
        <Box flex={1}>
          {title && (
            <Text size="sm" weight="bold" variant="high" marginBottom={1} block>
              {title}
            </Text>
          )}
          <Text size="sm" variant="high">
            {children}
          </Text>
        </Box>
      </Box>
    </Surface>
  );
};
