"use client";

import { useState } from "react";

export default function ContactForm() {
  const [form, setForm] = useState({
    name: "",
    phone:"",
    email: "",
    message: "",

  });

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();

    await fetch("/api/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(form),
    });

    alert("Message envoyé");

    setForm({
      name: "",
      phone: "",
      email: "",
      message: "",
    });
  };

  return (
    <form
      onSubmit={submit}
      className="flex flex-col gap-4 mt-8 max-w-xl"
    >
      <input
        className="border p-3 rounded bg-white"
        placeholder="Nom"
        value={form.name}
        onChange={(e) =>
          setForm({
            ...form,
            name: e.target.value,
          })
        }
      />
      <input
        className="border p-3 rounded bg-white"
        placeholder="Téléphone"
        value={form.phone}
        onChange={(e) =>
          setForm({
            ...form,
            phone: e.target.value,
          })
        }
      />
      <input
        type="email"
        className="border p-3 rounded bg-white"
        placeholder="Email"
        value={form.email}
        onChange={(e) =>
          setForm({
            ...form,
            email: e.target.value,
          })
        }
      />

      <textarea
        className="border p-3 rounded bg-white h-40"
        placeholder="Message"
        value={form.message}
        onChange={(e) =>
          setForm({
            ...form,
            message: e.target.value,
          })
        }
      />

      <button
        className="bg-black text-white px-6 py-3 rounded"
        type="submit"
      >
        Envoyer
      </button>
    </form>
  );
}