"use client";

import { FormCard, FormContent, FormInfo } from "@/components/FormCard";
import { useGlobal } from "@/context/global";
import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
import Link from "next/link";
import LoginForm from "./components/form";

type LoginPageProps = {};
export default function LoginPage({}: LoginPageProps) {
  const { dict } = useGlobal();

  return (
    <div className="flex items-center justify-center bg-black/15 p-8">
      <FormCard>
        <FormContent
          title={dict.pages.auth.login.form.title}
          subtitle={dict.pages.auth.login.form.subtitle}
          icon={faUserCircle}
        >
          <LoginForm />
        </FormContent>
        <FormInfo className="relative flex flex-col">
          <div className="mt-auto flex w-full flex-col items-center p-4 text-center">
            <div className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2">
              <p>
                <picture>
                  <img
                    className="mx-auto"
                    src={"/assets/logo-bw.png"}
                    width={200}
                    alt=""
                  />
                </picture>
              </p>
            </div>
            <div className="mt-auto w-full space-y-2 text-xs [&_a]:font-bold [&_a]:underline">
              <div className="flex w-full justify-between">
                <p>
                  <Link href={"/privacy-policy"}>
                    {dict.pages.auth.login.form.privacy}
                  </Link>
                </p>
                <p>
                  <Link href={"/terms-of-use"}>
                    {dict.pages.auth.login.form.terms}
                  </Link>
                </p>
              </div>
            </div>
          </div>
        </FormInfo>
      </FormCard>
    </div>
  );
}