"use client";
import Loading from "@/app/[lang]/loading";
import Header from "@/components/views/header/Header";
import MainDetails from "@/components/views/single-product/MainDetails";
import SingleProductDetails from "@/components/views/single-product/SingleProductDetails";
import SingleProductSlider from "@/components/views/single-product/SingleProductSlider";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import useGetQuery from "@/hooks/useGetQuery";
import { images } from "@/lib/images";
import { Product } from "@/modules/products/product";

const Page = ({ params: { id } }: { params: { id: string } }) => {
  const { lang, locale } = useCurrentLanguage();
  const { data: product, isLoading } = useGetQuery<Product>({
    endpoint: `api/Product_web/${id}`,
    queryKey: ["products", id],
    select(data) {
      return data.data;
    },
  });

  const crumb = [
    { path: `/${lang}`, label: locale.home },
    { path: `/${lang}/products`, label: locale.products },
    {
      path: `/${lang}/products?categoryId=${product?.category?.id}`,
      label: product?.category?.title?.[lang],
    },
    {
      path: `/${lang}/products?categoryId=${product?.category?.id}&subcategoryId=${product?.subcategory?.id}`,
      label: product?.subcategory?.title?.[lang],
    },
  ];

  return (
    <div>
      {/* header */}
      <Header
        title={product?.name?.[lang] || ""}
        crumb={crumb}
        image={images.fData1}
      />

      <div className="container py-24 ">
        {/* title, price and label */}
        <MainDetails product={product!} className="md:hidden" />
        <div className="flex flex-col md:flex-row justify-between gap-7">
          {/* slider */}
          <div className="w-[55%] max-md:w-full relative">
            {isLoading ? (
              <Loading className="min-h-[300px]" />
            ) : (
              <SingleProductSlider lang={lang} product={product!} />
            )}
          </div>
          {/* details */}
          <div className="w-[45%] max-md:w-full relative">
            {isLoading ? (
              <Loading className="min-h-[300px]" />
            ) : (
              <SingleProductDetails lang={lang} product={product!} />
            )}
          </div>
        </div>
      </div>
      {/* <RecommendedForYou product={product!} /> */}
    </div>
  );
};

export default Page;