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 { AlertCircle, XCircle, Info, AlertTriangle } from 'lucide-react';

interface ErrorBannerProps {
  title?: string;
  message: string;
  variant?: 'error' | 'warning' | 'info' | 'success';
}

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

  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}>
        <Icon icon={colors.icon} size={5} color={colors.text} />
        <Box flex={1}>
          {title && <Text weight="medium" color={colors.text} block mb={1}>{title}</Text>}
          <Text size="sm" color={colors.text} opacity={0.9} block>{message}</Text>
        </Box>
      </Stack>
    </Surface>
  );
}