<VerifyForm />

import { useState } from 'react';

import { useTranslation } from 'react-i18next';

import { SignUpElements } from '@locai1/iam-react/elements';

const { VerifyForm } = SignUpElements;

const CustomVerifyForm = ({ onComplete, email }) => {
  const { i18n } = useTranslation();
  const [email, setEmail] = useState<string | undefined>();

  const handleComplete = (value: string) => {
    setEmail(value);
    console.log(`Verify code for email ${value} requested`);
  };

  return (
    <VerifyForm.Root onComplete={handleComplete}>
      <VerifyForm.OtpInputs
        dir={i18n.dir()}
      />
      <VerifyForm.ErrorMessage
        className="custom-error-class"
      />
      <VerifyForm.SubmitButton
        text="Verify"
        className="custom-button-class"
      />
    </VerifyForm.Root>
  );
};