"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) {
            //use err to avoid unused variable warning
            if (err instanceof Error) {
                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>
    );
}