"use client";
import { useEffect, useState } from "react";
import ProductThumb from "../cards/product-thumb";


interface RelatedProduct {
  id: string;
  slug: string;
  main_item_image: {
    image_url: string;
  };
  design_house: {
    name: string;
  };
  product_name: string;
  price: number;
}

const showLimit = 10;

export default function FabricProducts(props: { products: RelatedProduct[] }) {
  const [relatedProducts, setRelatedProducts] = useState<RelatedProduct[]>([]);

  const { products } = props;

  return (
    <div className="grid grid-cols-2 gap-4 md:grid-cols-5 md:gap-8">
      {products &&
        products
          .slice(0, showLimit)
          .map((product) => (
            <ProductThumb
              key={product.id}
              image={product.main_item_image?.image_url}
              hoverImg={product.main_item_image?.image_url}
              title={product.product_name}
              price={product.price}
              url={`/product/${product.slug}`}
              designHouse={product.design_house?.name}
              pid={product.id}
              showLikeBtn={true}
              wishType="PRODUCT"
            />
          ))}
    </div>
  );
}