"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 { MixSignUp } from "../mix-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 [referrer, setReferrer] = React.useState("");

  const { t } = useTranslation();

  return (
    <div className="flex flex-col justify-center space-y-6 ">
      {error ? <ErrorBanner>{error}</ErrorBanner> : null}
      <>
          <div className="flex flex-col ">
            <h1 className="text-4xl text-black">{t("auth.sign_up")}</h1>
          </div>

          <div className="grid gap-10 mt-4">
            <div className="relative">

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

              email={setEmail}
              password={setPassword}
              referrer={setReferrer}
              emailValue={email}
              passwordValue={password}
              referrerValue={referrer}
            />
          </div>
        </>

    </div>
  );
}
