import Link from 'next/link';
import type { IndexRow } from '@/lib/queries/indices';
import { fmtNum, cn } from '@/lib/format';
import { Delta } from '@/components/ui/primitives';

/** Live tape (§163): marquee of indices; indices without a published value show their build status. */
export function IndexTape({ indices, className }: { indices: IndexRow[]; className?: string }) {
  if (!indices.length) return null;
  const items = indices.map((i) => (
    <Link key={i.ticker} href={`/rareindex/${i.ticker}`} className="flex shrink-0 items-center gap-2 px-4 text-[12px] hover:bg-inset" style={{ borderLeft: `2px solid ${i.color ?? 'var(--ri-index)'}` }}>
      <span className="font-semibold tracking-wide text-fg">{i.ticker}</span>
      {i.latest ? (
        <>
          <span className="num text-muted">{fmtNum(i.latest.value, { digits: 2 })}</span>
          <Delta value={i.change1d} />
        </>
      ) : (
        <span className="text-subtle">
          building · {i.pricedAssets}/{i.minConstituents}
        </span>
      )}
    </Link>
  ));
  return (
    <div className={cn('relative overflow-hidden border-y border-border bg-elevated', className)} aria-label="Index tape">
      <div className="tape-track flex w-max py-1.5">
        {items}
        {items.map((it, k) => (
          <span key={`dup-${k}`} aria-hidden>
            {it}
          </span>
        ))}
      </div>
    </div>
  );
}