import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface RatingHistoryItemProps {
  date: string;
  skillChange: number;
  safetyChange: number;
  sportsmanshipChange: number;
}

export function RatingHistoryItem({
  date,
  skillChange,
  safetyChange,
  sportsmanshipChange,
}: RatingHistoryItemProps) {
  const formatChange = (value: number) => {
    if (value === 0) return '—';
    return value > 0 ? `+${value}` : `${value}`;
  };

  const getChangeColor = (value: number) => {
    if (value === 0) return 'text-gray-500';
    return value > 0 ? 'text-performance-green' : 'text-red-400';
  };

  return (
    <Box display="flex" alignItems="center" justifyContent="between" p={3} rounded="md" bg="bg-deep-graphite" border borderColor="border-charcoal-outline">
      <Text color="text-white" size="sm">{date}</Text>
      <Box display="flex" alignItems="center" gap={4}>
        <Box textAlign="center">
          <Text size="xs" color="text-gray-500" block mb={1} style={{ fontSize: '10px' }}>Skill</Text>
          <Text size="xs" weight="bold" color={getChangeColor(skillChange)}>{formatChange(skillChange)}</Text>
        </Box>
        <Box textAlign="center">
          <Text size="xs" color="text-gray-500" block mb={1} style={{ fontSize: '10px' }}>Safety</Text>
          <Text size="xs" weight="bold" color={getChangeColor(safetyChange)}>{formatChange(safetyChange)}</Text>
        </Box>
        <Box textAlign="center">
          <Text size="xs" color="text-gray-500" block mb={1} style={{ fontSize: '10px' }}>Sports</Text>
          <Text size="xs" weight="bold" color={getChangeColor(sportsmanshipChange)}>{formatChange(sportsmanshipChange)}</Text>
        </Box>
      </Box>
    </Box>
  );
}