"use client";

import { WebSettingContext } from "@/context/webSettingContext";
import fetcher from "@/utils/fetcher";
import Image from "next/image";
import Link from "next/link";
import { useContext } from "react";
import useSWR from "swr";
import FooterContact from "../common/footerContact/FooterContact";
import Socials from "../common/socials/Socials";

type MenuItem = {
  menu_lavel: string;
  slug: string;
  link_url: null | string;
};

type MenuData = MenuItem[];

const Footer = () => {
  const {
    data: webSettingData,
    error: webSettingError,
    isLoading: webSettingLoading,
  } = useContext(WebSettingContext);

  
  const {
    data,
    error,
    isLoading,
  }: { data: MenuData; error: any; isLoading: boolean } = useSWR(
    "/category-list",
    fetcher
  );

  
  
  let content,list,contacts,footer;

  if (webSettingError)
    content = <div className="text-center">There was an Error!</div>;

  if (webSettingLoading) content = <div className="text-center"></div>;

  if (webSettingData) {
    const { contact, social_link, footer_logo, footer_text } = webSettingData;
    // console.log(webSettingData,"quawish")
    console.log(webSettingData,"footer")
    content = (
      <>
        <div className="flex gap-3 flex-col md:flex-col  justify-around md:justify-between items-start ">
          <div className="clss w-[154px] sm:w-[100px] sm:h-[100px] md:w-[150px] md:h-[80px] lg:w-[180px] lg:h-[100px] xl:w-[210px] xl:h-[100px] ">
            <Link href="/">
              <Image  src={footer_logo} alt="logo" width={210} height={150} style={{borderRadius:"5px"}} />
            </Link>
          </div>
          <div className="mt-3 flex flex-col items-start gap-1">
  <div className="text-[16px] text-[#999999] ">Follow Us</div>
  <div className="flex text-white flex justify-evenly gap-4">
    <Socials />
  </div>
</div>
          {/* <div>
            <p className="text-black dark:text-white text-xl">
              {contact?.editor}
            </p>
            <div className="mb-3 flex gap-3 justify-center">
              <Socials socialMediaLinks={social_link} />
            </div>
          </div> */}
        </div>
   

        {/* <div className="mb-5  justify-center text-white flex flex-wrap text-center gap-x-3 lg:gap-x-6 gap-y-2 lg:gap-4 text-[#000] dark:text-white">
          <FooterContact data={contact} />
        </div> */}

        
      </>
    );
    list = (
      <div className="grid grid-cols-4 gap-4 md:gap-2 lg:gap-4  text-[#958F8F]  dark:text-white ">
        {data?.slice(0,16)?.map((item, i) => {
          const { link_url, menu_lavel, slug } = item;
          return (
            <Link key={i} className="text-[16px] line-clamp-1 capitalize hover:text-white hover:scale-105 duration-300" href={`/${slug?.toLowerCase()}`}>
              {menu_lavel.toLowerCase()}
            </Link>
          );
        })}
      </div>
    );
    

    contacts = (
      <>
      <div className="mb-5 flex justify-start  text-[#958F8F] flex flex-wrap gap-x-3 lg:gap-x-3 gap-y-2 lg:gap-4 text-[#000] dark:text-white">
          <FooterContact data={contact} />
        </div>
      </>
    )

    footer =(
      <div className="flex flex-row items-center text-[#958F8F] justify-center md:px-5 p-6 lg:px-12 lg:py-6 w-full">
        {footer_text}
      </div>
    )
  }

  return (
    <footer className="relative min-h-[200px] mt-[20px] bg-[#292929] text-white pt-6 dark:bg-[#202327]">
      <div className="container px-3 mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 border-b border-[#958F8F] ">
        <div className="col-span-3 md:col-span-3  md:col-span-3  w-full flex sm:justify-start md:justify-start lg:justify-center xl:justify-center items-center p-6 ">
        {content}
        </div>


<div className="col-span-6 md:col-span-5 lg:col-span-6 xl:col-span-6 border-b border-[#958F8F] md:border-b-0   border-t border-[#958F8F] md:border-t-0 py-5 md:pl-12  py-6 lg:py-12 pl-6 lg:pl-12 lg:pr-4 w-full">
  {/* Directly insert list without wrapping it in another grid */}
  <h1 className="flex items-start pb-6 font-semibold">Categories</h1> {list}
</div>



    <div className="col-span-3 md:col-span-4 lg:col-span-3 xl:col-span-3 flex flex-col justify-between items-center md:px-5 p-6 lg:p-12 lg:pl-3 w-full">
    <div className="w-full flex flex-col md:flex-row md:h-full md:flex md:items-center md:justify-center gap-4">

    <div className="grid grid-cols-12  w-full">
      <div className="col-span-12 flex flex-col text-[16px] items-start justify-center">
      <h1 className="flex items-start pb-6 font-semibold">Contact Us</h1>{contacts}</div>
      </div>
    </div>
  </div>
        </div>

        <div className="">
          {footer}
        </div>
      </div>
      {/* Shadow applied to the top of the footer */}
      <div className="absolute top-0 left-0  bg-white dark:bg-[#202327] shadow-lg"></div>
      <div className="w-full h-[60px] bg-[#292929] sm:hidden"></div>
      
    </footer>
  );
};

export default Footer;