import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/primitives/Box';
import { Text } from '@/ui/Text';
import { ChevronDown, ChevronUp, Minus } from 'lucide-react';

interface DeltaChipProps {
  value: number;
  type?: 'rank' | 'rating';
}

export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
  if (value === 0) {
    return (
      <Box display="flex" alignItems="center" gap={1} color="text-gray-600">
        <Icon icon={Minus} size={3} />
        <Text size="xs" font="mono">0</Text>
      </Box>
    );
  }

  const isPositive = value > 0;
  const color = isPositive 
    ? (type === 'rank' ? 'text-performance-green' : 'text-performance-green') 
    : (type === 'rank' ? 'text-error-red' : 'text-error-red');
  
  // For rank, positive delta usually means dropping positions (e.g. +1 rank means 1st -> 2nd)
  // But usually "Delta" in leaderboards means "positions gained/lost"
  // Let's assume value is "positions gained" (positive = up, negative = down)
  
  const IconComponent = isPositive ? ChevronUp : ChevronDown;
  const absoluteValue = Math.abs(value);

  return (
    <Box 
      display="flex" 
      alignItems="center" 
      gap={0.5} 
      color={color}
      bg={`${color.replace('text-', 'bg-')}/10`}
      px={1.5}
      py={0.5}
      rounded="full"
    >
      <Icon icon={IconComponent} size={3} />
      <Text size="xs" font="mono" weight="bold">
        {absoluteValue}
      </Text>
    </Box>
  );
}