userApp/src/pages/explore/index.tsx

import { useMemo } from 'react';
import './explore.css';
import { Swiper, SwiperSlide } from 'swiper/react';
import { SwiperOptions } from 'swiper/types';
import { Grid, Pagination, Navigation } from 'swiper/modules';
import { useIsMobile } from '@/hooks/useIsMobile';
import ExploreCard from './+components/ExploreCard';
import ROUTES_OBJECT from '@/routes/RoutesObject';
import TopSlider from './+components/TopSlider';
import { useGetAllSurveyForms } from '@/services/SurveyForm';
import appointmentsIcon from '@/assets/images/glass-icons/appointments.png';
import heartIcon from '@/assets/images/glass-icons/heart.png';
import surveyIcon from '@/assets/images/glass-icons/survey.png';
import reportIcon from '@/assets/images/glass-icons/report.png';
import discountIcon from '@/assets/images/glass-icons/discount.png';
import learnIcon from '@/assets/images/glass-icons/learn.png';
import cardIcon from '@/assets/images/glass-icons/card.png';
import supportIcon from '@/assets/images/glass-icons/support.png';
import shopIcon from '@/assets/images/glass-icons/shop.png';

const sliderProps: SwiperOptions = {
  slidesPerView: 1,
  grid: { rows: 1, fill: 'row' },
  spaceBetween: 0,
  modules: [Grid, Pagination, Navigation],
  pagination: { clickable: true },
  navigation: true,
};

const Explore = () => {
  const { data: surveyFormsData } = useGetAllSurveyForms();
  const isMobile = useIsMobile();
  const itemsPerSlide = isMobile ? 9 : 12;
  const exploreCardsData = useMemo(
    () => [
      {
        label: 'وفاداری',
        icon: <img src={heartIcon} className="size-full" />,
        link: ROUTES_OBJECT.loyaltyCards,
        tooltip: 'جدید',
      },
      {
        label: 'گزارش‌ها',
        icon: <img src={reportIcon} className="size-full" />,
        link: ROUTES_OBJECT.report,
      },
      {
        label: 'نظرسنجی',
        icon: <img src={surveyIcon} className="size-full" />,
        link: ROUTES_OBJECT.surveyForms,
        tooltip: 'جدید',
        counter: surveyFormsData?.incomplete_count,
      },
      {
        label: 'کیف پول',
        icon: <img src={cardIcon} className="size-full" />,
        link: '',
        isLock: true,
      },
      {
        label: 'نوبت‌های من',
        icon: <img src={appointmentsIcon} className="size-full" />,
        link: ROUTES_OBJECT.appointments,
        tooltip: 'ویژه',
        isBold: true,
      },
      {
        label: 'تخفیف‌کده',
        icon: <img src={discountIcon} className="size-full" />,
        link: '',
        isLock: true,
      },
      {
        label: 'فروشگاه',
        icon: <img src={shopIcon} className="size-full" />,
        link: '',
        isLock: true,
      },
      {
        label: 'آموزش',
        icon: <img src={learnIcon} className="size-full" />,
        link: '',
        isLock: true,
      },
      {
        label: 'پشتیبانی',
        icon: <img src={supportIcon} className="size-full" />,
        link: ROUTES_OBJECT.support,
      },
    ],
    [],
  );
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const chunkArray = (array: any[], size: number) => {
    const result = [];
    for (let i = 0; i < array.length; i += size) {
      result.push(array.slice(i, i + size));
    }
    return result;
  };
  const groupedCards = chunkArray(exploreCardsData, itemsPerSlide);

  return (
    <div className="explore-page-wrapper bg-slate-50 min-h-[100dvh] flex flex-col gap-4 pt-20">
      <div className="absolute -top-1/3 -right-0 size-full bg-[url('@/assets/images/bg-light-effect.png')] bg-cover bg-no-repeat opacity-30 md:opacity-50 rotate-180" />
      <div>
        <TopSlider />
      </div>
      <div className="w-full relative p-2 flex-1 overflow-hidden">
        <div
          className="absolute bottom-0 -left-1/4 lg:left-0 size-full bg-[url('@/assets/images/bg-light-effect.png')]  
        bg-cover bg-no-repeat opacity-20 md:opacity-50"
        />
        <Swiper dir="rtl" {...sliderProps} className="max-w-3xl mx-auto">
          {groupedCards.map((slideGroup, index) => (
            <SwiperSlide key={index} className="min-h-[480px]">
              <div className="grid grid-cols-3 md:grid-cols-4 gap-y-2">
                {slideGroup.map((card, cardIndex) => (
                  <ExploreCard
                    key={`${index}-${cardIndex}`}
                    index={cardIndex}
                    {...card}
                  />
                ))}
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
};

export default Explore;