"use client"
import SectionHeader from "@/components/sharedComponents/SectionHeader";
import React from "react";
import GeneralSlider from "@/components/UiComponents/CarouselSwiper/GeneralSlider";
import LocalePath from "@/components/UiComponents/LocalePath";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import { useTranslations } from "next-intl";
import dynamic from "next/dynamic";
import AppSkeleton from "@/components/UiComponents/Loader/AppSkeleton";

const Template = ({ categories }: any) => {
  const t = useTranslations("Text");

  return (
    <section className="main-sec categories-sec bg-white">
      <div className="container">
        <SectionHeader title={t("multiDiscover")}  />
        <GeneralSlider
          hideArrows
          className="mt-6"
          slideClass="!mt-4"
          extraSettings={{
            // slidesPerView: 4,
            grid: { rows: 2 }, 
            spaceBetween: 16,
            breakpoints: {
              0: { slidesPerView: 2 }, 
              1024: { slidesPerView: 4 } 
            },
          }}
          withPagination
        >
          {categories?.map((item: any, index: number) => (
            <LocalePath
            key={`category_${index}`}
            href={`/categories/${item?.slug}`}
          >
            <div data-aos="zoom-in-up" className="grid grid-cols-2 shadow-sm  hover:!shadow-md gap-6 justify-between items-center p-4 rounded-xl border-[1px] border-gray-100 bg-[linear-gradient(161.9deg,rgba(255,255,255,0.4)_26.42%,rgba(215,174,234,0.068)_97.97%)]">
              <h2 className="text-xs md:text-xl font-semibold md:leading-7 text-start text-text ">
                {item?.title}
              </h2>
              <ImageWithFallback
                src={item?.image}
                width={200}
                height={200}
                className="w-[200px] md:h-[100px] h-[70px] object-contain"
                alt={item?.title}
              />
            </div>
          </LocalePath>
          ))}
        </GeneralSlider>
      </div>
    </section>
  );
};


const SkeletonTemplate = ()=>(
    <div className="main-sec categories-sec bg-white ">
      <div className="container">
          <AppSkeleton width='100%' height='60px' className='flex-1' />
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-10 ">
            {[...Array(8)].map((item:number,index:number)=>(
                <AppSkeleton key={`category_skeleton_${index}`} width='100%' height='134px' className='flex-1 size-full' />
            ))}
          </div>
      </div>
    </div>
)

const HomeCategories = dynamic(() => Promise.resolve(Template), {
  ssr: false,
  loading:()=><SkeletonTemplate/>  
});


export default HomeCategories;