"use client";
import apis from "@/services";
import { fetchFooterSocial } from "@/store/slices/landingSlice";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import { useParams } from "next/navigation";
// import React, { useState, useEffect } from "react";
// import { useParams, useRouter } from "next/navigation";
// import { toast } from "react-toastify";
// import { useTranslations } from "next-intl";
// import apis from "@/services";
// import cms from "@/services/cms";
// import detectLang from "@/utiles/detectLang";
// import cmsImage from "@/utiles/cmsImage";
// import { useDispatch, useSelector } from "react-redux";
// import Image from "next/image";
// import { IoLocationSharp } from "react-icons/io5";
// import { FaPhone } from "react-icons/fa";
// import { MdEmail } from "react-icons/md";
// import { fetchFooterSocial } from "@/store/slices/landingSlice";

// const Footer = () => {
//   let t = useTranslations();
  
//   let {locale} = useParams();
//   const dispatch = useDispatch();
//   const { setting, footerSocial } = useSelector((state) => state.landing);

//   let [newsFeet, setNewsFeet] = useState({ email: "" });
//   // const [socials, setSocials] = useState([]);

  
//   useEffect(() => {
//     dispatch(
//       fetchFooterSocial({
//         section: "social",
//         page: "all",
//       })
//     );
//   }, []);

//   const onChangeHandler = (e) => {
//     const { id, value } = e.target;
//     setNewsFeet((prevState) => ({ ...prevState, [id]: value }));
//   };

//   const submit = async (e) => {
//     e.preventDefault();
//     const res = await apis.addNewsFeet(newsFeet);
//     if (res?.data?.status) {
//       setNewsFeet({ email: "" });
//       toast.success(res.data?.message);
//     } else {
//       toast.error(res.data?.message);
//       setNewsFeet({ email: "" });
//     }
//   };

//   // const fetchSection = async () => {
//   //   const res = await cms.getSection("social", "all");
//   //   setSocials(res?.data?.data?.social);
//   // };

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


//   console.log("footerSocial", footerSocial);

//   console.log("FOOTERSETTING", setting);
//   return (
//     <div className="custom-footer">
//       <div className="footer-container">
//         <div className="footer-column">
//           <div className="footer-section">
//             <p className="footer-heading">{t("footer.contact")}</p>
//             <p className="footer-desc">
//               {detectLang(setting?.footer, "contact_desc", locale)}
//             </p>
//             <ul>
//               <li>
//                 <IoLocationSharp size={40} />
//                 <span>{setting?.footer?.address}</span>
//               </li>
//               <li>
//                 <FaPhone />
//                 <span>{setting?.footer?.phone}</span>
//               </li>
//               <li>
//                 <MdEmail />
//                 <span>{setting?.footer?.email}</span>
//               </li>
//             </ul>
//             <img
//               src={cmsImage(setting?.footer?.logo)}
//               alt=""
//               className="footer-logo"
//             />
//           </div>
//         </div>

//         <div className="footer-column">
//           <div className="footer-section">
//             <p className="footer-heading">{t("footer.mission")}</p>
//             <p className="footer-desc">
//               {detectLang(setting?.footer, "mission_desc", locale)}
//             </p>
//             <p className="footer-heading">{t("footer.vision")}</p>
//             <p className="footer-desc">
//               {detectLang(setting?.footer, "vission_desc", locale)}
//             </p>
//           </div>
//         </div>

//         <div className="footer-column">
//           <div className="footer-section">
//             <p className="footer-heading">{t("footer.newsletter")}</p>
//             <p className="footer-desc">
//               {detectLang(setting?.footer, "newsletter_desc", locale)}
//             </p>
//             <form onSubmit={submit}>
//               <div className="email-input-group">
//                 <input
//                   type="email"
//                   placeholder="your@gmail.com"
//                   className="email-input"
//                   required
//                   id="email"
//                   value={newsFeet.email}
//                   onChange={onChangeHandler}
//                 />
//                 <button className="subscribe-btn" type="submit">
//                   {t("footer.subscribe")}
//                 </button>
//               </div>
//             </form>

//             <div className="powered-follow">
//               <div className="powered-by">
//                 <p className="footer-heading">{t("footer.poweredby")}</p>
//                 <p className="footer-desc">
//                   {detectLang(setting?.footer, "powered_desc", locale)}
//                 </p>
//                 <Image
//                   src={cmsImage(setting?.footer?.powered_image)}
//                   alt=""
//                   className="powered-img"
//                   width={200}
//                   height={200}
//                 />
//                 <Image
//                   src={"/images/sp.png"}
//                   alt=""
//                   className="sp-img"
//                   width={60}
//                   height={60}
//                 />
//               </div>

//               <div className="follow-us">
//                 <p className="footer-heading">{t("footer.follow")}</p>
//                 {/* <div className="social-icons">
//                   {footerSocial?.map((item, index) => (
//                     <a
//                       key={index}
//                       className="social-link"
//                       href={item?.link}
//                       target="_blank"
//                       rel="noopener noreferrer"
//                     >
//                       <Image
//                         src={cmsImage(item?.icon)}
//                         alt="Social Icon"
//                         width={100}
//                         height={100}
//                       />
//                     </a>
//                   ))}
//                 </div> */}
//               </div>
//             </div>
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default Footer;


import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { toast } from "react-toastify";

const Footer = () => {
  let t = useTranslations();
  
  let {locale} = useParams();
  const dispatch = useDispatch();
  const { setting, footerSocial } = useSelector((state) => state.landing);

  let [newsFeet, setNewsFeet] = useState({ email: "" });
  // const [socials, setSocials] = useState([]);

  
  useEffect(() => {
    dispatch(
      fetchFooterSocial({
        section: "social",
        page: "all",
      })
    );
  }, []);

  const onChangeHandler = (e) => {
    const { id, value } = e.target;
    setNewsFeet((prevState) => ({ ...prevState, [id]: value }));
  };

  const submit = async (e) => {
    e.preventDefault();
    const res = await apis.addNewsFeet(newsFeet);
    if (res?.data?.status) {
      setNewsFeet({ email: "" });
      toast.success(res.data?.message);
    } else {
      toast.error(res.data?.message);
      setNewsFeet({ email: "" });
    }
  };

  // const fetchSection = async () => {
  //   const res = await cms.getSection("social", "all");
  //   setSocials(res?.data?.data?.social);
  // };

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


  console.log("footerSocial", footerSocial);

  console.log("FOOTERSETTING", setting);

  return (
    <React.Fragment>
   
        <footer className="">
          <div className="container">
         
              <div className="col-lg-4 col-md-6 col-12 align-self-center increase">
                <div className="left">
                  <Link href="/">
                    <Image
                      src="/images/footer-logo.png"
                      alt=""
                      width={150}
                      height={60}
                    />
                  </Link>
               
                  <p className="para muted">{t("desc.footerDesc1")}</p>
                </div>
              </div>
              <div className="col-lg-4 col-md-6 col-12 increase">
                <div className="center">
                  <p
                    className="card-title pt-2 pb-1"
                    style={{ color: "#fff", textAlign: "left" }}
                  >
                    {t("footer.contact")}
                  </p>
                  <p className="para muted">{t("desc.footerDesc2")}</p>
                  
                </div>
              </div>
              <div className="col-lg-4 col-md-12 col-12 increase">
                <div className="right">
                  <p
                    className="card-title pt-2 pb-1"
                    style={{ color: "#fff", textAlign: "left" }}
                  >
                    {t("titles.Subscribe_us")}
                  </p>
                  <p className="para muted"> {t("desc.footerDesc3")}</p>
                  <div className="joint-input my-3">
                    <input type="email" placeholder={t('labels.your_email')} />
                    <button className="button primary-button">{t('buttons.submit')}</button>
                  </div>
                  <p
                    className="card-title pt-2 pb-1"
                    style={{ color: "#fff", textAlign: "left" }}
                  >
                    {t("titles.followUs")}
                  </p>
                  <div className="flex-list my-2">
                    <Link
                      href="https://twitter.com/javatimescaffe?t=Q2myIHKv4waNHL3Wev-Q-g&s=09"
                      target="_blank"
                    >
                      <Image
                        src="/images/twitter-new.png"
                        className="md-icon"
                        alt="social icon"
                        width={50}
                        height={50}
                      />
                    </Link>
                    <Link
                      href="https://www.youtube.com/watch?v=13bmTsSj54I&t=4s"
                      target="_blank"
                    >
                      <Image
                        src="/images/youtube-new.png"
                        className="md-icon"
                        alt="social icon"
                        width={50}
                        height={50}
                      />
                    </Link>
                    <Link
                      href="https://www.tiktok.com/@antonioleite9"
                      target="_blank"
                    >
                      <Image
                        src="/images/tiktok-new.png"
                        className="md-icon"
                        alt="social icon"
                        width={50}
                        height={50}
                      />
                    </Link>
                 
                    <a
                      href="https://www.facebook.com/JavaTimesCaffe?mibextid=ZbWKwL"
                      target="_blank"
                    >
                      <img
                        src="/images/facebook-new.png"
                        className="md-icon"
                        alt="social icon"
                        width={50}
                        height={50}
                      />
                    </a>
                    <a
                      href="https://www.instagram.com/javatimescaffe/?igshid=NmE0MzVhZDY%3D"
                      target="_blank"
                    >
                      <img
                        src="/images/instagram-new.png"
                        className="md-icon"
                        alt="social icon"
                        width={50}
                        height={50}
                      />
                    </a>
                 
                  </div>
                </div>
              </div>
    
          </div>
        </footer>

    </React.Fragment>
  );
};

export default Footer;