"use client";

import React, { useState } from "react";
import contactForm from "@/actions/contact";

export default function ContactForm() {
  const [message, setMessage] = useState<string | null>(null);

  const callback = async (formData: FormData) => {
    await contactForm(formData);
    setMessage(
      "Our intrepid team of code monkeys will be looking at this as soon as possible!"
    );
  };

  return (
    <>
      <form className="space-y-4" action={callback}>
        <div>
          <label htmlFor="name" className="block mb-1">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            className="w-full px-3 py-2 border rounded"
            required
          />
        </div>
        <div>
          <label htmlFor="email" className="block mb-1">
            Email
          </label>
          <input
            type="email"
            id="email"
            name="email"
            className="w-full px-3 py-2 border rounded"
            required
          />
        </div>
        <div>
          <label htmlFor="message" className="block mb-1">
            Message
          </label>
          <textarea
            id="message"
            name="message"
            rows={4}
            className="w-full px-3 py-2 border rounded"
            required
          ></textarea>
        </div>
        <button
          type="submit"
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
        >
          Send Message
        </button>
        {message !== null && (
          <>
            <div className="p-4 bg-gray-200">
              <p className="text-xl">Thanks!</p>
              <p className="p-4">{message}</p>
            </div>
          </>
        )}
      </form>
    </>
  );
}