<SignUpForm />

import { useRouter } from 'next/navigation';

import { HttpError, Session } from '@locai1/iam-javascript';
import { SignUpElements } from '@locai1/iam-react/elements';

const { SignUnForm } = SignUpElements;

const CustomSignUpForm = () => {
   const { push } = useRouter();

   const handleComplete = (session: Session | undefined) => {
    console.log('Sign in complete', session);
  };

  const handleError = (error: HttpError | Error) => {
    console.error('Sign in error ', error.message);
  };

  const verificationUrl = `${window.location.origin}/verify-email?code={{code}}&userId={{userId}}&sessionToken={{sessionToken}}`;

  return (
    <SignUpForm.Root
      onComplete={handleComplete}
      onError={handleError}
      verificationUrl={verificationUrl}
    >
      <SignUpForm.FirstNameInput
        label="First Name"
        placeholder="Enter your first name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.LastNameInput
        label="Last Name"
        placeholder="Enter your last name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.PasswordInput
        label="Password"
        placeholder="Enter your password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.ConfirmPasswordInput
        label="Confirm Password"
        placeholder="Re-enter your password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignUpForm.ErrorMessage className="custom-error-class" />
      <SignUpForm.SubmitButton text="Sign Up" className="custom-button-class" />
    </SignUpForm.Root>
  );
};