import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Star, Trophy } from 'lucide-react';

interface DriverRatingPillProps {
  rating: number | null;
  rank: number | null;
}

export function DriverRatingPill({ rating, rank }: DriverRatingPillProps) {
  return (
    <Box display="flex" alignItems="center" gap={2} mt={0.5} style={{ fontSize: '11px' }}>
      <Box display="inline-flex" alignItems="center" gap={1}>
        <Icon icon={Star} size={3} color="var(--warning-amber)" />
        <Text color="text-amber-300" className="tabular-nums">
          {rating !== null ? rating : '—'}
        </Text>
      </Box>

      {rank !== null && (
        <Box display="inline-flex" alignItems="center" gap={1}>
          <Icon icon={Trophy} size={3} color="var(--primary-blue)" />
          <Text color="text-primary-blue" className="tabular-nums">#{rank}</Text>
        </Box>
      )}
    </Box>
  );
}