import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Badge } from '@/ui/Badge';
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 (
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
        <Icon icon={Minus} size={3} intent="low" />
        <Text size="xs" font="mono" variant="low">0</Text>
      </div>
    );
  }

  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">
      <div style={{ display: 'flex', alignItems: 'center', gap: '0.125rem' }}>
        <Icon icon={IconComponent} size={3} />
        <Text size="xs" font="mono" weight="bold">
          {absoluteValue}
        </Text>
      </div>
    </Badge>
  );
}