'use client'

import Image from 'next/image'

import signUpImage from '../../public/images/sign-up.png'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { SubmitHandler, useForm } from 'react-hook-form'

type FormSignUpTypes = {
  name: string
  email: string
  whatsapp: string
  interest: string
  course: string
}

export function SignUp() {
  const { register, handleSubmit } = useForm<FormSignUpTypes>()

  const onSubmit: SubmitHandler<FormSignUpTypes> = (data) => console.log(data)

  return (
    <section className="w-full bg-gradient-to-r from-green-700 to-green-50 pb-6 md:py-6 md:pb-0">
      <div className="container overflow-hidden relative h-auto flex flex-col md:flex-row gap-2 justify-between items-center ">
        <p className="max-w-[268px] my-6 md:max-w-[420px] text-xl md:text-2xl lg:text-3xl text-center order-3 md:order-1">
          Inscreva-se e receba novidades sobre cursos ou areas de interesse
        </p>
        <Image
          src={signUpImage}
          height={450}
          width={331}
          alt="Imagem demonstrativa de uma pessoa se cadastrando na plataforma"
          className="mt-auto md:min-h-[550px] object-cover order-1 md:order-2"
        />
        <Separator className="h-2 w-screen order-2 md:hidden -mt-3 bg-yellow-100" />
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="w-full md:w-[600px] flex flex-col gap-8 order-4"
        >
          <div>
            <Label htmlFor="name" className="text-gray-300 text-xs">
              Nome
            </Label>
            <Input
              type="text"
              id="name"
              placeholder="Digite aqui"
              {...register('name')}
            />
          </div>
          <div>
            <Label htmlFor="email" className="text-gray-300 text-xs">
              E-mail
            </Label>
            <Input
              type="email"
              id="email"
              placeholder="Digite aqui"
              {...register('email')}
            />
          </div>
          <div>
            <Label htmlFor="whatsapp" className="text-gray-300 text-xs">
              Whatsapp
            </Label>
            <Input
              type="number"
              id="whatsapp"
              placeholder="Digite aqui"
              {...register('whatsapp')}
            />
          </div>
          <div>
            <Label htmlFor="interest" className="text-gray-300 text-xs">
              Área de interesse
            </Label>
            <Input
              type="text"
              id="interest"
              placeholder="Digite aqui"
              {...register('interest')}
            />
          </div>
          <div>
            <Label htmlFor="course" className="text-gray-300 text-xs">
              Curso desejado
            </Label>
            <Input
              type="text"
              id="course"
              placeholder="Digite aqui"
              {...register('course')}
            />
          </div>
          <Button
            type="submit"
            variant="secondary"
            className="uppercase max-w-32 mx-auto md:mb-6"
          >
            Inscrever
          </Button>
        </form>
      </div>
    </section>
  )
}
