"use client";

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


interface RelatedProduct {
  id: string;
  slug: string;
  product_id: string;
  image: string;
  designHouse: string;
  product_name: string;
  price: number;
}

export default function PdpRecommedation({ relatedProducts = [], heading_name }: { relatedProducts?: RelatedProduct[]; heading_name?: string }) {

  return (
    <div className="flex w-full flex-col gap-4 py-5 md:py-20 relative">
      <div className=" inline-flex bg-[url(/icons/hairlines-wider.svg)] bg-[auto_4px] bg-repeat py-[4px] text-xl tracking-wider uppercase">
        <h4 className="flex w-full bg-gray-100 capitalize pt-5 pb-3">
          {heading_name ? (
            <>
              Made using {heading_name}
            </>
          ) : (
            <>Products you may also like</>
          )}
        </h4>
      </div>

      <div className="mt-5 grid grid-cols-2 gap-4 md:grid-cols-4 md:gap-10">
        {relatedProducts && relatedProducts.map((product) => (
          <ProductThumb
            key={product.product_id}
            image={product.image}
            hoverImg={product.image}
            title={product.product_name}
            price={product.price}
            url={`/product/${product.slug}`}
            designHouse={product.designHouse}
            pid={product.id}
            showLikeBtn={true}
             wishType="PRODUCT"
          />
        ))}
      </div>
    </div>
  );
}