"use client";
import React, { useContext } from "react";
import Image from "next/image";
import Link from "next/link";
import { productsCards } from "@/utils";
import ProductContext from "@/app/contexts/productContext";
import { backendUrl } from "@/utils/axios";

const RelatedProductCards = ({ productId }) => {
  const { products } = useContext(ProductContext);

  if (!products) {
    return null;
  }

  const product = products?.find((pr) => pr.id == productId);
  const relatedProducts = products?.filter(
    (prod) =>
      prod.product_category.id == product.product_category.id &&
      prod.id != productId
  );

  if (relatedProducts.length == 0) {
    return null;
  }
  return (
    <div className="container mx-auto min-h-[70vh] px-4 py-8 max-w-8xl ">
      <div className="text-center mb-12">
        <h1 className="font-serif capitalize tracking-wide font-semibold text-5xl text-slate-800 mb-4">
          You may also like
        </h1>
      </div>
      <div className="overflow-x-auto sm:pl-[400px] hide-navbar gap-5 flex items-center justify-center">
        {relatedProducts.map((product) => (
          <Link href={`/products/${product.id}`} key={product.id}>
            <div
              key={product.id}
              className="relative bg-[#EDE8E0]  overflow-hidden sm:h-[350px] sm:w-[300px] "
            >
              <div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
                Exclusive
              </div>
              <div className="sm:h-[300px] h-[200px] w-[200px] sm:w-[300px] flex items-center justify-center overflow-hidden">
                <Image
                  src={`${backendUrl}${product?.images[0]?.image}`}
                  alt={`Logo for ${product.title}`}
                  width={300}
                  height={300}
                  className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-300"
                />
              </div>
              <div className="p-4 ">
                <h3 className="text-center text-[1rem] uppercase  text-gray-800">
                  {product.title}
                </h3>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default RelatedProductCards;