import React from "react";
import ProductCard from "@/shared/card/ProductCard";
import { products } from "@/interfaces/types";
import LocalePath from "@/shared/LocalePath";
import { useTranslations } from "next-intl";

type Props = {
  products: products[];
  category_id: string;
};

export default function RelatedProducts({ products, category_id }: Props) {
  const t = useTranslations();
  return (
    <div className="container mt-20">
      <div className="flex items-center justify-between mb-10">
        <h2 className="text-xl md:text-3xl text-primary"> {t("Text.related_products")}</h2>
        <LocalePath
          href={`/products?category_id=${category_id}`}
          className="text-primary hover:text-primary-dark transition-colors flex items-center gap-2 group"
        >
          <span>{t("Text.see_more")}</span>
          <span className="group-hover:translate-x-1 transition-transform">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-chevron-left"
            >
              <path d="m15 18-6-6 6-6"></path>
            </svg>
          </span>
        </LocalePath>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {products.map((product) => (
          <div key={product.id}>
            <ProductCard product={product} />
          </div>
        ))}
      </div>
    </div>
  );
}