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

export interface TickerItem {
  id: string;
  label: string;
  changePercent: number;
  direction?: PriceDeltaDirection;
}

export interface TickerStripProps extends React.HTMLAttributes<HTMLDivElement> {
  items: TickerItem[];
  /** Tắt animation (cho unit test / reduced motion). */
  paused?: boolean;
}

/**
 * Thanh chạy ngang hiển thị biến động giá top quận.
 * Render 2 lần liên tiếp để tạo vòng lặp mượt với animation `-50%`.
 */
export function TickerStrip({ items, paused, className, ...rest }: TickerStripProps) {
  const duplicated = React.useMemo(() => [...items, ...items], [items]);
  return (
    <div className={cn('relative h-full overflow-hidden', className)} {...rest}>
      <div
        className={cn(
          'flex h-full w-max items-center gap-6 whitespace-nowrap px-4 font-mono text-ticker',
          !paused && 'animate-ticker',
        )}
      >
        {duplicated.map((item, idx) => (
          <span
            key={`${item.id}-${idx}`}
            className="inline-flex items-center gap-2 text-foreground-muted"
          >
            <span className="text-foreground">{item.label}</span>
            <PriceDelta
              value={item.changePercent}
              size="sm"
              hideIcon={false}
              direction={item.direction}
            />
          </span>
        ))}
      </div>
    </div>
  );
}