import React from 'react'
import ProductCard from "@/shared/ui/product-card";
import {Product} from "@/shared/types/product";
import { useTranslations } from 'next-intl';

interface RelatedProductsSectionProps {
  products: Product[]
}

const RelatedProductsSection = ({products}: RelatedProductsSectionProps) => {
  const t = useTranslations("")
  return (
      <div className={"bg-background section-wrapper"}>
        <div className={"my-container"}>
          <h1 className="section-title uppercase text-center pb-5">{t("Boshqa mahsulotlar")}</h1>
          <div className={"mb-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"}>
            {
              products.map((product) => (
                  <ProductCard
                      key={product.id}
                      product={product}
                  />
              ))
            }
          </div>
        </div>
      </div>
  )
}
export default RelatedProductsSection
