"use client";

import { Paginate } from "@/types/global";
import { ListHeader } from "@/components/list-header/list-header";
import { useT } from "@/context/translation-map";
import { useSettings } from "@/hook/use-settings";
import { categoryService } from "@/services/category";
import { useInfiniteQuery } from "@tanstack/react-query";
import { extractDataFromPagination } from "@/utils/extract-data";
import { Category } from "@/types/category";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import { FreeMode } from "swiper/modules";
import { ServiceCardUi2 } from "./service-card";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import { ClientOnly } from "@/components/client-only/client-only";

interface ServicesProps {
  data?: Paginate<Category>;
}

export const Services = ({ data }: ServicesProps) => {
  const t = useT();
  const { language } = useSettings();
  const { data: services } = useInfiniteQuery(
    ["services", language?.locale],
    ({ pageParam }) =>
      categoryService.getAll({
        lang: language?.locale,
        perPage: 11,
        type: "service",
        page: pageParam,
        column: "input",
        sort: "asc",
      }),
    {
      initialData: data ? { pages: [data], pageParams: [1] } : undefined,
      getNextPageParam: (lastPage) => lastPage.links.next && lastPage.meta.current_page + 1,
    }
  );
  const serviceList = extractDataFromPagination(services?.pages);
  return (
    <div>
      <ListHeader title={t("services")} />
      <ClientOnly
        fallback={
          <div className="flex gap-4 overflow-hidden">
            {Array.from(Array(6).keys()).map((i) => (
              <div key={i} className="bg-gray-300 rounded-button min-w-[120px] h-28" />
            ))}
          </div>
        }
      >
        <Swiper slidesPerView="auto" spaceBetween={20} freeMode modules={[FreeMode]}>
          {serviceList?.map((service) => (
            <SwiperSlide key={service.id} className="max-w-max">
              <Link href={`/search?category_id=${service.id}`}>
                <ServiceCardUi2 data={service} key={service.id} />
              </Link>
            </SwiperSlide>
          ))}
        </Swiper>
      </ClientOnly>
    </div>
  );
};