<UpdatePasswordForm />

import { useTranslation } from 'react-i18next';

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

const { UpdatePasswordForm } = ForgotPasswordElements;

const CustomUpdatePasswordForm = ({ email }: {
  email: string,
}) => {
  const { i18n } = useTranslation();

  const handleComplete = () => {
    console.log('Password updated successfully');
  };

  const resetPasswordUrl = `${window.location.origin}/forgot-password?code={{code}}`;

  return (
    <UpdatePasswordForm.Root
      onComplete={handleComplete}
      email={email}
      resetPasswordUrl={resetPasswordUrl}
    >
      <UpdatePasswordForm.OtpInputs
        dir={i18n.dir()}
      />
      <UpdatePasswordForm.DidntReceiveCodeSection
        text="Didn't receive? Resend"
      />
      <UpdatePasswordForm.PasswordInput
        label="Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <UpdatePasswordForm.ConfirmPasswordInput
        label="Confirm Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <UpdatePasswordForm.ErrorMessage
        className="custom-error-class"
      />
      <UpdatePasswordForm.SubmitButton
        text="Update Password"
        className="custom-button-class"
      />
    </UpdatePasswordForm.Root>
  );
};