import PageContent from "~/modules/page-content"
import Form from "./components/Form"
import Link from "next/link"
import Image from "next/image"
import IndoteknikLogo from "~/images/logo.png"
import AccountActivation from "../account-activation"

const LOGO_WIDTH = 150;
const LOGO_HEIGHT = LOGO_WIDTH / 3;

const Register = () => {
  return (
    <div className="container">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-10 px-2 md:pt-16">
        <section>
          <Link href='/' className="block md:hidden">
            <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={LOGO_WIDTH} height={LOGO_HEIGHT} className="mx-auto mb-4 w-auto h-auto" priority />
          </Link>

          <h1 className="text-2xl font-semibold text-center md:text-left">
            Daftar Akun Indoteknik
          </h1>
          <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left">
            Buat akun sekarang lebih mudah dan terverifikasi
          </h2>

          <Form />

          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
            Sudah punya akun Indoteknik?{' '}
            <Link href='/login' className='inline font-medium text-danger-500'>
              Masuk
            </Link>
          </div>

          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
            Akun anda belum aktif?{' '}
            <Link href='/register?activation=email' className='inline font-medium text-danger-500'>
              Aktivasi
            </Link>
          </div>
        </section>

        <section className="my-10 md:my-0">
          <PageContent path="/register" />
        </section>
      </div>

      <AccountActivation />
    </div>
  )
}

export default Register