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

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

export const ErrorBanner = ({ 
  title, 
  message,
  variant = 'error' 
}: ErrorBannerProps) => {
  const intent = variant === 'error' ? 'critical' : variant === 'warning' ? 'warning' : 'primary';
  const color = variant === 'error' ? 'rgba(227, 92, 92, 0.05)' : variant === 'warning' ? 'rgba(255, 190, 77, 0.05)' : 'rgba(25, 140, 255, 0.05)';
  const borderColor = variant === 'error' ? 'rgba(227, 92, 92, 0.2)' : variant === 'warning' ? 'rgba(255, 190, 77, 0.2)' : 'rgba(25, 140, 255, 0.2)';

  return (
    <Surface 
      variant="muted" 
      rounded="lg" 
      padding={4} 
      style={{ backgroundColor: color, border: `1px solid ${borderColor}` }}
    >
      <Box display="flex" alignItems="start" gap={4}>
        <Icon icon={AlertTriangle} size={5} intent={intent} />
        <Box>
          {title && (
            <Text weight="medium" variant="high" block marginBottom={1}>
              {title}
            </Text>
          )}
          <Text size="sm" variant="low">
            {message}
          </Text>
        </Box>
      </Box>
    </Surface>
  );
};