"use client";

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

const ContactPage = () => {
    const [message, setMessage] = useState(null);

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

    return (
        <>
            <header className="bg-white shadow">
                <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    <h1 className="text-3xl font-bold text-gray-900">Contact Us</h1>
                </div>
            </header>
            <div className="bg-gray-100 mx-auto text-gray-900 px-4 pt-8">
                <div className="grid grid-cols-1 gap-8 max-w-3xl mx-auto">
                    <div className="text-gray-900">
                        <h2 className="text-xl font-semibold mb-4">Get in Touch</h2>
                        <p className="mb-4">We would love to hear from you. Please fill out the form below or use our contact information.</p>

                        <h3 className="text-lg font-semibold mb-2">Contact Information</h3>
                        <p>Email: sales@techaro.lol</p>
                    </div>

                    <div className="pb-4">
                        <h2 className="text-xl font-semibold mb-4">Contact Form</h2>
                        <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>
                    </div>
                </div>
            </div>
        </>
    );
};

export default ContactPage;