<RequestCodeForm />

import { useState } from 'react';

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

const { RequestCodeForm } = ForgotPasswordElements;

const CustomRequestCodeForm = ({ onComplete, resetPasswordUrl }) => {
  const [email, setEmail] = useState<string | undefined>();

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

  return (
    <RequestCodeForm.Root
      onComplete={handleComplete}
      resetPasswordUrl={resetPasswordUrl}
      email={email}
    >
      <RequestCodeForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <RequestCodeForm.ErrorMessage
        className="custom-error-class"
      />
      <RequestCodeForm.SubmitButton
        text="Request Code"
        className="custom-button-class"
      />
    </RequestCodeForm.Root>
  );
};