import React from "react";
// import { useGeneralSetting } from "@/common/state-management/general-setting";
import { FormEvent, useEffect, useState } from "react";
import toast from "react-hot-toast";
import style from "../Footer/style/promoOffer.module.css"
const PromoOffer = ()=>{
    // const { data, isLoading, fetchData } = useGeneralSetting();
    const [formData, setFormData] = useState<FormData>({
        email: "",
        name: "",
        telephone: "",
        message: "",
      });

      useEffect(() => {
        // fetchData();
      }, []);

      type FormData = {
        email: string;
        name: string;
        telephone: string;
        message: string;
      };

      const [errors, setErrors] = useState({
        email: false,
        name: false,
        message: false,
      });


const handleGetOffer = async (e: FormEvent) => {
    e.preventDefault();
    let loadingToast;
    try {
      loadingToast = toast.loading("Mengirimkan formulir...");
      const response = await fetch("/api/contactus", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ ...formData, from: "newsletter" }),
      });
  
      if (response.ok) {
        toast.dismiss(loadingToast);
        toast.success("Terima kasih telah menghubungi kami");
        setFormData({
          email: "",
          name: "",
          telephone: "",
          message: "",
        });
      } else {
        toast.dismiss(loadingToast);
        toast.error("Gagal mengirimkan formulir. Silakan coba lagi nanti.");
      }
    } catch (error) {
      toast.dismiss(loadingToast);
      console.error("Gagal mengirimkan formulir", error);
      toast.error("Terjadi kesalahan. Silakan coba lagi nanti.");
    }
  };

  


    return(
        <div className=" py-3 mb-3">
              <div className="md:flex container mx-auto md:justify-between md:items-center md:gap-x-20">
                <div className="">
                  <span className="text-black font-semibold text-sm md:text-lg">
                    Dapatkan Promo Menarik Setiap Bulan{" "}
                  </span>
                  <p>
                    Promo produk dengan penawaran terbatas setiap bulannya!
                  </p>
                </div>
                <div className=" flex-1 flex items-center h-full  justify-end text-sm text-slate-950">
                <form  onSubmit={handleGetOffer} className={style['form-input']}>
                    <div className="flex justify-start  w-full">
                        <div className="flex justify-end">
                            <input  
                                type="email"
                                value={formData.email}
                                onChange={(e) =>
                                    setFormData({ ...formData, email: e.target.value })
                                }
                                className={style['input']}
                                placeholder="Masukkan email anda disini"
                            />
                            <button
                                type="submit"
                                className={style['button']}
                            >
                                Dapatkan
                            </button>
                        </div>
                        

                    </div>
                  </form>

                </div>
              </div>
          </div>
    )
  };

  export default PromoOffer;