'use client'

import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { TextField } from '@mui/material'
import Image from 'next/image'
import { SubmitHandler, useForm } from 'react-hook-form'
import signUpImage from '../../public/images/sign-up.png'
import { StyledInputs } from './mui/styled-inputs'

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

export function SignUp() {
  const { 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 text-gray-50 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"
        >
          <TextField
            label="Nome"
            variant="standard"
            type="text"
            sx={StyledInputs({ color: '#fafafa' })}
          />
          <TextField
            label="Whatsapp"
            variant="standard"
            type="number"
            sx={StyledInputs({ color: '#fafafa' })}
          />
          <TextField
            label="Área de interesse"
            variant="standard"
            type="text"
            sx={StyledInputs({ color: '#fafafa' })}
          />
          <TextField
            label="E-mail"
            variant="standard"
            type="text"
            sx={StyledInputs({ color: '#fafafa' })}
          />
          <TextField
            label="Curso desejado"
            variant="standard"
            type="text"
            sx={StyledInputs({ color: '#fafafa' })}
          />
          <Button
            type="submit"
            variant="secondary"
            className="uppercase max-w-32 mx-auto md:mb-6"
          >
            Inscrever
          </Button>
        </form>
      </div>
    </section>
  )
}
