"use client";

import { Product } from "@/modules/products/product";
import ThirdProductCard from "../products/third-product-card";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";

type Props = {
  productsData: Product[] | undefined;
};

const CategoryProducts = ({ productsData }: Props) => {
  const { lang } = useCurrentLanguage();

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-7 place-items-center md:place-items-stretch">
      {productsData?.map((product) => (
        <>
          {/* <FirstProductCard product={product} key={product?.id} /> */}
          <ThirdProductCard product={product} key={product?.id} />

          {/* <div className="relative" key={product?.id}>
                        <LangLink href={`products/${product?.id}`}>
                            <Image
                                className="w-full h-[350px] sm:h-[400px] lg:h-[450px] object-cover"
                                width={375}
                                height={700}
                                src={product?.images?.[0]?.original_url || staticImages.fData1}
                                alt="fData1"
                            />
                        </LangLink>
                        <div className="group">
                            <div
                                className="h-5 w-5 absolute bottom-[40px] right-[40px] bg-white rounded-full shadow-lg shadow-black after:absolute
                                    after:h-8 after:w-8 after:bg-white after:rounded-full after:opacity-50 after:-left-full after:-top-full after:translate-x-[45%] after:translate-y-[45%]"
                            ></div>

                            <div className="absolute max-w-[300px] bottom-[90px] right-[25px] bg-white px-3 py-3 after:absolute after:inline-block after:right-3 after:bottom-[-11px] after:border-x-[13px] after:border-t-[12px] after:border-x-transparent  after:border-t-white  invisible group-hover:visible hover:visible">
                                <h3 className="text-xl font-bold">{product?.name?.[lang]}</h3>
                                <p className="text-mainGray py-2">{product?.description?.[lang]}</p>
                                <PriceWithIcon price={product?.price} product={product} />
                                <div className="bg-transparent w-full h-[50px] absolute bottom-[-50px] right-0" />
                            </div>
                        </div>
                    </div> */}
        </>
      ))}
    </div>
  );
};

export default CategoryProducts;