'use client';

import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Shield } from 'lucide-react';

interface SafetyRatingBadgeProps {
  rating: number;
  ratingLabel: string;
  size?: 'sm' | 'md' | 'lg';
}

export function SafetyRatingBadge({ rating, ratingLabel, size = 'md' }: SafetyRatingBadgeProps) {
  const getColor = (r: number) => {
    if (r >= 90) return 'text-performance-green';
    if (r >= 70) return 'text-warning-amber';
    return 'text-red-500';
  };

  const getBgColor = (r: number) => {
    if (r >= 90) return 'bg-performance-green/10';
    if (r >= 70) return 'bg-warning-amber/10';
    return 'bg-red-500/10';
  };

  const getBorderColor = (r: number) => {
    if (r >= 90) return 'border-performance-green/20';
    if (r >= 70) return 'border-warning-amber/20';
    return 'border-red-500/20';
  };

  const sizeProps = {
    sm: { px: 2, py: 0.5, gap: 1 },
    md: { px: 3, py: 1, gap: 1.5 },
    lg: { px: 4, py: 2, gap: 2 },
  };

  const iconSizes = {
    sm: 12,
    md: 14,
    lg: 16,
  };

  const iconColors = {
    'text-performance-green': '#22C55E',
    'text-warning-amber': '#FFBE4D',
    'text-red-500': '#EF4444',
  };

  const colorClass = getColor(rating);

  return (
    <Box 
      display="inline-flex" 
      alignItems="center" 
      rounded="full" 
      border 
      bg={getBgColor(rating)}
      borderColor={getBorderColor(rating)}
      {...(sizeProps[size] as any)}
    >
      <Shield size={iconSizes[size]} color={iconColors[colorClass as keyof typeof iconColors]} />
      <Text 
        size={size === 'lg' ? 'sm' : 'xs'} 
        weight="bold" 
        font="mono" 
        color={colorClass}
      >
        {ratingLabel}
      </Text>
    </Box>
  );
}