import { InputMui } from '@/components/mui/inputs'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import Image from 'next/image'
import Link from 'next/link'
import globo from '../../../public/images/globo.svg'

export default function Login() {
  return (
    <main>
      <section className=" container flex flex-col justify-center items-center space-y-10 h-[723px]">
        <Image
          src={globo}
          width={77}
          height={77}
          alt="Imagem demonstrativa de um globo"
        />
        <h1 className="text-green-400 text-2xl">Área administrativa</h1>
        <h2 className="text-gray-50">
          Acesso exclusivo para usuários cadastrados.
        </h2>
        <form
          // onSubmit={handleSubmit(onSubmit)}
          className="w-full md:w-[600px] flex flex-col gap-8 order-4"
        >
          <div className="flex flex-col space-y-6">
            <div className="flex flex-col space-y-4">
              <InputMui label="E-mail" variant="outlined" type="email" />
              <InputMui label="Senha" variant="outlined" type="password" />
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="remember" />
              <label
                htmlFor="remember"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Lembrar-me
              </label>
            </div>
            <Button className="rounded-sm" asChild>
              <Link href="/admin">Entrar</Link>
            </Button>
            <Button
              variant={'link'}
              asChild
              className="text-green-400 uppercase"
            >
              <Link href="#">Recuperar senha</Link>
            </Button>
          </div>
        </form>
      </section>
    </main>
  )
}
