"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;
}

export default function Recommendation() {
  const [relatedProducts, setRelatedProducts] = useState<RelatedProduct[]>([]);

  useEffect(() => {
    const fetchRelatedProducts = async () => {
      try {
        const response = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/products`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });

        if (!response.ok) {
          throw new Error(`Error: ${response.status} - ${response.statusText}`);
        }

        const data = await response.json();
        setRelatedProducts(data.data?.product || []);
      } catch (error) {
        console.error("Error fetching related products:", error);
      }
    };

    fetchRelatedProducts();
  }, []);

  return (
    <div className="flex w-full flex-col gap-4 py-5 md:py-20">
      <div className="font-macropolo inline-flex bg-[url(/icons/hairlines-wider.svg)] bg-[auto_4px] bg-repeat py-[4px] text-xl tracking-wider uppercase">
        <div className="flex w-full bg-gray-100 py-4">you may also like</div>
      </div>

      <div className="mt-5 grid grid-cols-2 gap-4 md:grid-cols-4 md:gap-10">
        {relatedProducts.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>
    </div>
  );
}