'use client';

import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { useState } from 'react';

interface ModalNovoContatoProps {
  open: boolean;
  setOpen: (open: boolean) => void;
}

export function ModalNovoContato({ open, setOpen }: ModalNovoContatoProps) {
  const [form, setForm] = useState({
    tipo_contato: '',
    nome: '',
    cargo: '',
    email: '',
    telefone: '',
  });

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }

  function handleSubmit() {
    // Aqui também faria o POST para salvar no banco
    console.log(form);
    setOpen(false);
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Novo Contato</DialogTitle>
        </DialogHeader>

        <div className="grid gap-4">
          <Input placeholder="Tipo (obra, faturamento, geral)" name="tipo_contato" onChange={handleChange} />
          <Input placeholder="Nome" name="nome" onChange={handleChange} />
          <Input placeholder="Cargo" name="cargo" onChange={handleChange} />
          <Input placeholder="Email" name="email" onChange={handleChange} />
          <Input placeholder="Telefone" name="telefone" onChange={handleChange} />
        </div>

        <Button className="w-full mt-4" onClick={handleSubmit}>
          Salvar Contato
        </Button>
      </DialogContent>
    </Dialog>
  );
}
