import * as React from 'react';
import { cn } from '@/lib/utils';
import { PriceDelta, type PriceDeltaDirection } from './price-delta';

export interface MarketIndexProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Tên index, vd "GGX Market". */
  name: string;
  /** Giá trị hiện tại. */
  value: string | number;
  /** Biến động % so với mốc tham chiếu. */
  changePercent: number;
  /** Biến động tuyệt đối (optional). */
  change?: string | number;
  /** Khung thời gian, vd "24h". */
  window?: string;
  /** Ép direction cho delta. */
  direction?: PriceDeltaDirection;
}

/**
 * Index lớn hiển thị chỉ số thị trường tổng: dùng cho header/hero dashboard.
 */
export function MarketIndex({
  name,
  value,
  changePercent,
  change,
  window = '24h',
  direction,
  className,
  ...rest
}: MarketIndexProps) {
  return (
    <div className={cn('flex items-end gap-4', className)} {...rest}>
      <div className="flex flex-col">
        <span className="text-xs font-medium uppercase tracking-wider text-foreground-muted">
          {name}
        </span>
        <span
          data-numeric
          className="font-mono text-3xl font-semibold leading-none text-foreground"
        >
          {value}
        </span>
      </div>
      <div className="flex flex-col items-start gap-0.5 pb-1">
        <PriceDelta value={changePercent} size="md" direction={direction} />
        {typeof change !== 'undefined' ? (
          <span data-numeric className="font-mono text-[11px] text-foreground-muted">
            {change} ({window})
          </span>
        ) : (
          <span className="text-[11px] text-foreground-dim">{window}</span>
        )}
      </div>
    </div>
  );
}