frondend/components/ContactForm.tsx

"use client"
import React from 'react'
import { useForm, SubmitHandler } from "react-hook-form"
import { postMessage } from '@/utils'
import { MessageProps } from '@/types'
import { toast } from 'react-hot-toast';

type Props = {
    startLoading: () => void
    stopLoading: () => void
}
const ContactForm = ({ startLoading, stopLoading }: Props) => {



    const {
        register,
        handleSubmit,
        reset,
        formState: {},
    } = useForm<MessageProps>()
    const onSubmit: SubmitHandler<MessageProps> = async (data) => {
        try {
            startLoading; // Set loading state to true
            const result = await postMessage(data);
            if (result.success) {
                toast.success('已收到您的訊息，我們會盡快回覆您！');
              reset(); // Reset form fields
                // Reset form or perform any other actions on success
            } else {
                toast.error('Failed to send message. Please try again.');
            }
        } catch (error) {
            console.error('Error sending message:', error);
            toast.error('An error occurred. Please try again later.');
        } finally {
            stopLoading; // Set loading state back to false
        }
    };





    return (

        <div className="w-full flex flex-col h-auto items-center justify-center relative  " >
            <div className="text-4xl sm:text-3xl lg:text-5xl text-center mt-[10vh]">
                讓我們知道您的想法
            </div>
            <div className="bg-[url('/images/014.png')] absolute bottom--10 inset-0 h-auto w-full bg-contain bg-bottom bg-no-repeat hidden lg:block"></div>

            <div className="font-[sans-serif] w-full md:h-[62vh] max-w-5xl relative bg-transparent lg:bg-white shadow-none lg:shadow-[0_2px_10px_-3px_rgba(6,81,237,0.3)] rounded-3xl overflow-hidden lg:mt-14 lg:mb-56 sm:my-15 max-md:my-0 sm:mx-20">


                <div className="grid lg:grid-cols-10 ">

                    <form onSubmit={handleSubmit(onSubmit)} className="flex rounded-tl-3xl rounded-bl-3xl h-[62vh] lg:col-span-6 items-center justify-center">

                        <div className="space-y-3 w-full mx-11">
                            <div className="grid md:grid-cols-2 space-y-3">
                                <div className=" md:mr-3 mt-3">
                                    <p className='text-sm'>姓名</p>
                                    <input type='text'
                                        {...register("name", { required: true })}
                                        className="w-full mt-3  max-lg:bg-gray-100 md:bg-gray-100 max-sm:bg-[#F6E2E3] rounded-md py-3 px-4 text-sm outline-[#EA004F] md:focus-within:bg-transparent border border-gray-200" />
                                </div>
                                <div >
                                    <p className='text-sm'>電話</p>
                                    <input type='phone'
                                        {...register("phone", { required: true })}
                                        className="w-full mt-3 max-lg:bg-gray-100 md:bg-gray-100 max-sm:bg-[#F6E2E3] rounded-md py-3 px-4 text-sm outline-[#EA004F] md:focus-within:bg-transparent border border-gray-200" />
                                </div>
                            </div>

                            <div className="mt-5">
                                <p className='text-sm'>電郵</p>
                                <input type='email'
                                    {...register("email", { required: true })}
                                    className="w-full mt-3 max-lg:bg-gray-100 md:bg-gray-100 max-sm:bg-[#F6E2E3] rounded-md py-3 px-4 text-sm outline-[#EA004F] md:focus-within:bg-transparent border border-gray-200" />
                            </div>
                            <div className="mt-5">
                                <p className='text-sm'>訊息</p>
                                <textarea
                                    {...register("message", { required: true })}
                                    className="w-full mt-3 h-36 max-lg:bg-gray-100 md:bg-gray-100 max-sm:bg-[#F6E2E3] rounded-md px-4 text-sm pt-3 outline-[#EA004F] md:focus-within:bg-transparent border border-gray-200"></textarea>
                            </div>

                            <button
                                type="submit"
                                className={`middle none center rounded-full md:px-8 md:py-3 text-sm  max-sm:w-full py-3 px-8  bg-mainColor font-bold uppercase text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40`}
                                data-ripple-light="true"

                            >
                                {'發送'}
                            </button>
                        </div>
                    </form>
                    <div className="text-center  bg-[url('/images/contact.png')] bg-cover h-auto w-full lg:col-span-4 sm:hidden md:hidden lg:block">
                        {/* <img src="/images/contact.png"   /> */}
                    </div>
                </div>
            </div>


        </div>
    )
}

export default ContactForm