Verification code

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { VerificationCode } from './verification-code';

const PASTED = '482913';
const HOLD_MS = 1600;

export default function VerificationCodeDemo({ replay = 0 }: { replay?: number }) {
  const [code, setCode] = React.useState('');

  React.useEffect(() => {
    if (replay === 0) return;
    // Pastes a whole code at once, so the digits fill one box after another, then clears it.
    setCode(PASTED);
    const timer = window.setTimeout(() => setCode(''), HOLD_MS);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <div className="flex flex-col items-center gap-10">
      <div className="flex flex-col items-start gap-3">
        <VerificationCode value={code} onValueChange={setCode} hint="Enter the code from your email." />
        <Button hierarchy="link-color" size="sm" onClick={() => setCode('')}>
          Send again
        </Button>
      </div>
      <div className="flex flex-wrap items-start justify-center gap-10">
        <VerificationCode length={4} size="sm" label="Sign-in code" />
        <VerificationCode
          length={4}
          size="sm"
          label="Card code"
          defaultValue="1234"
          invalid
          hint="This code is not correct. Check the code and try again."
        />
      </div>
    </div>
  );
}