import * as React from 'react';
import { ArrowDown, ArrowUp, Minus } from 'lucide-react';
import { cn } from '@/lib/utils';

export type PriceDeltaDirection = 'up' | 'down' | 'neutral';

export interface PriceDeltaProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Phần trăm thay đổi. Dương = tăng, âm = giảm. */
  value: number;
  /** Đơn vị hiển thị, mặc định "%". */
  unit?: string;
  /** Số chữ số thập phân. */
  precision?: number;
  /** Hiển thị ẩn icon. */
  hideIcon?: boolean;
  /** Ép direction (ưu tiên hơn dấu của value). */
  direction?: PriceDeltaDirection;
  /** Kích cỡ text. */
  size?: 'sm' | 'md' | 'lg';
}

/**
 * Hiển thị biến động giá / % với icon up/down/neutral, dùng signal color.
 * Số luôn render trong font-mono, tabular-nums.
 */
export function PriceDelta({
  value,
  unit = '%',
  precision = 2,
  hideIcon = false,
  direction,
  size = 'md',
  className,
  ...rest
}: PriceDeltaProps) {
  const dir: PriceDeltaDirection =
    direction ?? (value > 0 ? 'up' : value < 0 ? 'down' : 'neutral');
  const Icon = dir === 'up' ? ArrowUp : dir === 'down' ? ArrowDown : Minus;
  const colorClass =
    dir === 'up'
      ? 'text-signal-up'
      : dir === 'down'
        ? 'text-signal-down'
        : 'text-signal-neutral';
  const sizeClass =
    size === 'sm' ? 'text-data-sm' : size === 'lg' ? 'text-data-lg' : 'text-data-md';
  const formatted = `${value > 0 ? '+' : ''}${value.toFixed(precision)}${unit}`;
  return (
    <span
      data-numeric
      className={cn(
        'inline-flex items-center gap-1 font-mono font-medium',
        colorClass,
        sizeClass,
        className,
      )}
      {...rest}
    >
      {!hideIcon ? <Icon className="h-3 w-3" aria-hidden /> : null}
      <span>{formatted}</span>
    </span>
  );
}