import { InputMui } from '@/components/mui/inputs'
import { Button } from '@/components/ui/button'
import { MenuItem } from '@mui/material'
import { Clock4, Mail, Smartphone } from 'lucide-react'

const matters = [
  {
    value: 'recent',
    label: 'Mais recentes',
  },
  {
    value: 'fast',
    label: 'Cursos rápidos',
  },
  {
    value: 'students',
    label: 'Estudantes',
  },
  {
    value: 'immediate',
    label: 'Início imediato',
  },
]

export default function Contact() {
  return (
    <main className="container flex flex-col justify-center items-center py-20">
      <h1 className="text-center font-normal md:font-extrabold text-green-800 text-2xl md:text-4xl">
        Fale com a SevenPro
      </h1>
      <div className="flex flex-col md:flex-row justify-between w-full mt-10 gap-10 md:gap-4">
        <div className="w-full md:w-1/2">
          <h2 className="text-green-800 text-xl md:text-2xl">
            Atendimento aos alunos e parceiros
          </h2>
          <ul className="flex flex-col gap-4 mt-6">
            <li className="flex items-center gap-4">
              <Clock4 className="text-green-800" />
              <span>De XXh à XXh</span>
            </li>
            <li className="flex items-center gap-4">
              <Smartphone className="text-green-800" />
              <span>Telefones: (XX) XXXX-XXXX</span>
            </li>
            <li className="flex items-center gap-4">
              <Mail className="text-green-800" />
              <span>E-mail: sevenpro@sevenpro.com.br</span>
            </li>
          </ul>
        </div>
        <div className="w-full md:w-1/2">
          <h2 className="text-green-800 text-xl md:text-2xl">
            Envie uma mensagem
          </h2>
          <form action="" className="mt-6 flex flex-col gap-6">
            <InputMui type="text" variant="outlined" label="Nome completo" />
            <InputMui
              type="text"
              variant="outlined"
              label="Mensagem"
              multiline
              rows={4}
            />

            <InputMui type="text" variant="outlined" label="Assunto" select>
              {matters.map((option) => (
                <MenuItem key={option.value} value={option.value}>
                  {option.label}
                </MenuItem>
              ))}
            </InputMui>

            <div className="flex">
              <Button type="submit" className="w-auto">
                Enviar
              </Button>
            </div>
          </form>
        </div>
      </div>
    </main>
  )
}
