"use client";
import { Category } from "@/modules/categories/cateogires";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import { cn } from "@/lib/utils";
import { FilterBody } from "@/modules/products/Filter";
import { useSearchParams, useRouter } from "next/navigation";

type Props = {
  setFilterData: React.Dispatch<React.SetStateAction<FilterBody>>;
  filterData: FilterBody;
  btnClassName?: string;
  categories: Category[] | undefined;
};
const CategoriesNavSlider = ({
  btnClassName,
  setFilterData,
  filterData,
  categories,
}: Props) => {
  const { lang } = useCurrentLanguage();
  const searchParams = useSearchParams();
  const router = useRouter();

  return (
    <Carousel
      className="my-10"
      opts={{ direction: lang === "ar" ? "rtl" : "ltr" }}
    >
      <CarouselContent>
        {categories?.map((cat) => (
          <CarouselItem className="basis-auto" key={cat?.id}>
            <button
              onClick={() => {
                const params = new URLSearchParams(searchParams.toString());
                params.set("categoryId", cat.id.toString());
                router.replace(`?${params.toString()}`, { scroll: false });
                setFilterData((prev) => ({ ...prev, categoryId: cat.id }));
              }}
              type="button"
              className={cn(
                `hover:bg-mainBlue hover:text-white rounded-3xl bg-white px-5 md:px-7 lg:px-12 py-2 md:py-4 duration-300 ${
                  cat.id === filterData?.categoryId && "!bg-mainBlue text-white"
                }`,
                btnClassName
              )}
            >
              {/* @ts-ignore */}
              {cat?.name}
            </button>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
};

export default CategoriesNavSlider;