"use client";

import { useState } from "react";

export default function Contact() {
  const [form, setForm] = useState({ name: "", email: "", message: "" });
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // Replace this with actual form submission logic (e.g., API call)
    try {
      // Simulate a successful submission
      await new Promise((resolve) => setTimeout(resolve, 1000));
      setSuccess(true);
      setForm({ name: "", email: "", message: "" });
    } catch (err) {
      setError("Failed to send message. Please try again.");
    }
  };

  return (
    <section id="contact" className="p-10 ">
      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
        Contact Me
      </h2>
      <form onSubmit={handleSubmit} className="mt-6 max-w-md mx-auto space-y-4">
        {success && (
          <p className="text-green-500">
            Your message has been sent successfully!
          </p>
        )}
        {error && <p className="text-red-500">{error}</p>}
        <input
          type="text"
          name="name"
          placeholder="Name"
          className="w-full p-2 border rounded dark:text-white"
          required
          value={form.name}
          onChange={handleChange}
        />
        <input
          type="email"
          name="email"
          placeholder="Email"
          className="w-full p-2 border rounded  dark:text-white"
          required
          value={form.email}
          onChange={handleChange}
        />
        <textarea
          name="message"
          placeholder="Message"
          className="w-full p-2 border rounded dark:text-white"
          rows={5}
          required
          value={form.message}
          onChange={handleChange}
        ></textarea>
        <button
          type="submit"
          className="w-full p-2 text-white rounded hover:bg-blue-600 transition"
        >
          Send
        </button>
      </form>
    </section>
  );
}