Text morph

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { TextMorph } from './text-morph';

const WORDS = ['Unsaved', 'Saving', 'Saved'] as const;
// Replay steps through the words with these start times (ms).
const STEPS = [0, 900, 1900];

export default function TextMorphDemo({ replay = 0 }: { replay?: number }) {
  const [word, setWord] = React.useState<string>('Saved');

  React.useEffect(() => {
    if (replay === 0) return;
    const timers = STEPS.map((at, i) => window.setTimeout(() => setWord(WORDS[i] as string), at));
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div className="flex flex-col items-center gap-6">
      <p className="text-display-sm font-semibold tracking-tight text-primary">
        <TextMorph data-testid="morph" text={word} />
      </p>
      <fieldset className="flex items-center gap-1 rounded-lg border border-secondary bg-primary p-1">
        <legend className="sr-only">Pick a word</legend>
        {WORDS.map((w) => (
          <Button
            key={w}
            size="sm"
            hierarchy="tertiary"
            aria-pressed={word === w}
            className={word === w ? 'bg-secondary text-primary' : undefined}
            onClick={() => setWord(w)}
          >
            {w}
          </Button>
        ))}
      </fieldset>
    </div>
  );
}