"use client";

import { useEffect, useState } from "react";

import CategoriesNavSlider from "./CategoriesNavSlider";
import CategoryProducts from "./CategoryProducts";
import { FilterBody } from "@/modules/products/Filter";
import LoadingSpinner from "../shared/loadingSpinner/LoadingSpinner";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import categories from "@/app/api-requests/categories";
import getProducts from "@/app/api-requests/getProducts";

// import MotionEl from "../shared/animation/MotionEl"

const MoreProductsAndInspiration = ({ lang }: { lang: Lang }) => {
  const catData = categories();
  const [filterData, setFilterData] = useState<FilterBody>({});
  const { data: productsData, isLoading } = getProducts(filterData);
  useEffect(() => {
    setFilterData((prev) => ({ ...prev, categoryId: catData?.[0]?.id }));
  }, [catData]);

  return (
    <section className="bg-mainOffWhite-200 py-20">
      <div className="container">
        <h2 className="text-xl md:text-2xl lg:text-3xl font-bold">
          <TranslateClient text="more_products_and_inspiration" />
        </h2>

        <CategoriesNavSlider
          filterData={filterData}
          setFilterData={setFilterData}
          categories={catData}
        />

        {isLoading ? (
          <div className="flex items-center justify-center">
            <LoadingSpinner />
          </div>
        ) : (
          <CategoryProducts productsData={productsData?.slice(0, 8)} />
        )}
      </div>
    </section>
  );
};

export default MoreProductsAndInspiration;