"use client";
import { FadeIn } from "@/components/landing/fade-in";
import * as React from "react";
import { ErrorBanner } from "../../banners";
import { EmailCode } from "../email-code";
import { EmailSignUp } from "../email-signup";
import { OAuthSignUp } from "../oauth-signup";

import Link from "next/link";
import { useTranslation } from "react-i18next";

export default function AuthenticationPage() {
  const [error, setError] = React.useState<string | null>(null);
  const [verify, setVerify] = React.useState(false);

  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [code, setCode] = React.useState("");

  const { t } = useTranslation();

  return (
    <div className="flex flex-col justify-center space-y-6 ">
      {error ? <ErrorBanner>{error}</ErrorBanner> : null}

      {!verify ? (
        <>
          <div className="flex flex-col ">
            {/* <h1 className="text-4xl text-white">Create new account</h1> */}
            <h1 className="text-4xl text-black">{t("auth.sign_up")}</h1>
            {/* <p className="mt-4 text-sm text-md text-white/50">
              Sign up to Unkey or?
              <Link href="/auth/sign-in" className="ml-2 text-white hover:underline">
                Sign in
              </Link>
            </p> */}
          </div>
          <div className="grid gap-10 mt-4">
            <div className="relative">

            </div>
            <EmailSignUp
              setError={setError}
              setVerification={setVerify}


              email={setEmail}
              password={setPassword}
              emailValue={email}
              passwordValue={password}

            />
          </div>

          <OAuthSignUp />
          {/* <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t border-black/20" />
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-4 bg-white text-black/50">OR</span>
            </div>
          </div> */}
        </>
      ) : (
        <FadeIn>
          <EmailCode
            setError={(e: string) => setError(e)}
            emailValue={email}
            passwordValue={password}
          />
        </FadeIn>
      )}
    </div>
  );
}