import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
import { Group } from '@/ui/Group';
import { ChevronDown, ChevronUp, Minus } from 'lucide-react';
import React from 'react';

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

export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
  if (value === 0) {
    return (
      <Group gap={1} data-testid="trend-indicator">
        <Icon icon={Minus} size={3} intent="low" />
        <Text size="xs" font="mono" variant="low">0</Text>
      </Group>
    );
  }

  const isPositive = value > 0;
  const variant = isPositive ? 'success' : 'critical';
  const IconComponent = isPositive ? ChevronUp : ChevronDown;
  const absoluteValue = Math.abs(value);

  return (
    <Badge variant={variant} size="sm" data-testid="trend-indicator">
      <Group gap={0.5}>
        <Icon icon={IconComponent} size={3} />
        <Text size="xs" font="mono" weight="bold">
          {absoluteValue}
        </Text>
      </Group>
    </Badge>
  );
}