import React from 'react'
import {CategoryCard} from "@/shared/ui/category-card";
import {Button} from "@/shared/ui/button";
import ProductCard from "@/shared/ui/product-card";
import {Product} from "@/shared/types/product";

interface ProductSectionProps{
  products: Product[]
}

const ProductsSection = ({products}: ProductSectionProps) => {
  return (
      <div className={"my-container"}>
        <section id={"invertor-section"} className={"my-container"}>
          <div className={"flex flex-col justify-center"}>
            <div>
              <div className={"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>
        </section>
      </div>
  )
}
export default ProductsSection
