<SignInForm />

import { useRouter } from 'next/navigation';

import type { Session } from '@locai1/iam-javascript';
import { SignInElements } from '@locai1/iam-react/elements';

import { FORGOT_PASSWORD_PAGE } from '@/const';

const { SignInForm } = SignInElements;

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

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

  const handleForgotPassword = () => {
    push(FORGOT_PASSWORD_PAGE);
  };

  return (
    <SignInForm.Root onComplete={handleComplete}>
      <SignInForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignInForm.PasswordInput
        label="Password"
        forgotPassword={{
          text: "Forgot your password?",
          onClick: handleForgotPassword,
        }}
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SignInForm.ErrorMessage className="custom-error-class" />
      <SignInForm.SubmitButton text="Sign In" className="custom-button-class" />
      <SignInForm.OAuthSection onComplete={handleComplete} />
    </SignInForm.Root>
  );
};