"use client";
import React, { use } from "react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Field } from "@/components/ui/field";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/redux/store";
import Link from "next/link";
import {
  useForm,
  SubmitHandler,
  Control,
  useFormContext,
} from "react-hook-form";
import { AuthFormValues } from "@/type/authType";

import CustomForm from "@/components/common/CustomForm";
import { useRouter } from "next/navigation";

interface StartWithEmailPageProps {
  onSubmit: SubmitHandler<AuthFormValues>;
}

const StartWithEmailPage = ({ onSubmit }: StartWithEmailPageProps) => {
  const {
    control,
    register,
    handleSubmit,
    formState: { errors },
  } = useFormContext<AuthFormValues>();

  const dispatch = useDispatch();
  const isTrue = useSelector((state: RootState) => state.toggle.value);
  const router = useRouter();

  return (
    <div className="mx-6 mt-10 flex flex-col items-center justify-center">
      {/* login text */}
      <div className="mx-2 flex flex-col gap-5">
        <div>
          <div className="text-background font-bricolage text-6xl font-bold">
            Register now
          </div>
          <div className="text-offset-text font-bricolage cursor-pointer text-6xl font-bold">
            Login now
          </div>
        </div>
        {/* text form */}
        <div className="my-0">
          <form action="" onSubmit={handleSubmit(onSubmit)}>
            <Field className="font-manrope max-w-sm">
              <div className="text-secondary-text text-2xl font-semibold">
                Start with email
              </div>
              <CustomForm type="register" register={register} errors={errors} />
            </Field>
          </form>
          {/* rules and regulation       */}

          <div className="text-secondary-text font-manrope mt-20 text-sm font-light">
            By clicking{" "}
            <span className="font-semibold">
              &quot;Register now/Login&quot;
            </span>{" "}
            you agree to our <span className="font-semibold">Terms</span>. Learn{" "}
            <br /> how we process your data in our
            <Link href="/privacy-policy" className="ml-1">
              <span className="font-semibold hover:underline">
                privacy policy
              </span>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default StartWithEmailPage;