Stats band

'use client';

import * as React from 'react';
import { type Stat, StatsBand } from './stats-band';

const STATS: Stat[] = [
  { value: 12_400, label: 'Teams on board' },
  {
    value: 98.9,
    label: 'Uptime this year',
    suffix: '%',
    format: { minimumFractionDigits: 1, maximumFractionDigits: 1 },
  },
  {
    value: 3_200_000,
    label: 'Monthly tasks',
    format: { notation: 'compact', maximumFractionDigits: 1 },
  },
  { value: 40, label: 'Countries' },
];

export default function StatsBandDemo({ replay = 0 }: { replay?: number }) {
  const box = React.useRef<HTMLElement>(null);

  // Replay resets the band to zeros above the fold, then scrolls it into view so the arrival plays again.
  React.useEffect(() => {
    const el = box.current;
    if (replay === 0 || !el) return;
    el.scrollTop = 0;
    // The rolling digits are taller than the figure, so the scroll goes to the band and not to the end of the box.
    const timer = window.setTimeout(() => {
      const band = el.querySelector('[data-slot="stats-band"]');
      if (band)
        el.scrollTo({
          top: band.getBoundingClientRect().top - el.getBoundingClientRect().top + el.scrollTop - 40,
          behavior: 'smooth',
        });
    }, 500);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <section
      ref={box}
      data-slot="stats-band-demo"
      // biome-ignore lint/a11y/noNoninteractiveTabindex: a scroll box must take keyboard focus so it can be scrolled without a mouse.
      tabIndex={0}
      aria-label="Scroll area"
      className="h-[240px] w-full max-w-[720px] overflow-y-auto rounded-xl border border-secondary bg-primary outline-none focus-visible:shadow-focus-ring"
    >
      <div className="flex h-[185px] items-center justify-center px-6 text-sm text-tertiary">
        Scroll down to see the figures
      </div>
      <div className="overflow-hidden px-6 pb-12">
        <StatsBand key={replay} stats={STATS} />
      </div>
    </section>
  );
}