Number roll

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { NumberRoll } from './number-roll';

const PRICES = [1240, 1380] as const;
const USD: Intl.NumberFormatOptions = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 };

export default function NumberRollDemo({ replay = 0 }: { replay?: number }) {
  const [high, setHigh] = React.useState(false);

  React.useEffect(() => {
    if (replay === 0) return;
    setHigh(false);
    const timer = window.setTimeout(() => setHigh(true), 300);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <div className="flex flex-col items-center gap-8">
      <div className="flex items-start gap-12">
        <div className="flex flex-col gap-1">
          <p className="text-sm text-tertiary">Monthly cost</p>
          <NumberRoll
            data-testid="price"
            className="text-display-sm font-semibold text-primary"
            value={PRICES[high ? 1 : 0]}
            format={USD}
            locales="en-US"
          />
        </div>
        <div className="flex flex-col gap-1">
          <p className="text-sm text-tertiary">Active seats</p>
          {/* Replay mounts the counter again, so it rolls up from 0. */}
          <NumberRoll
            key={replay}
            data-testid="counter"
            className="text-display-sm font-semibold text-primary"
            value={128}
            from={0}
          />
        </div>
      </div>
      <Button size="sm" hierarchy="secondary" onClick={() => setHigh((h) => !h)}>
        Change price
      </Button>
    </div>
  );
}