import React from "react";
import ProductCard from "@/shared/ui/product-card";
import { Product } from "@/shared/types/product";
import { BrandProductsResultType } from "@/shared/types/brands";

interface ProductSectionProps {
  products: BrandProductsResultType[];
}

const ProductsList = ({ 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((i) => {
                const product: Product = {
                  id: i.id,
                  name: i.name,
                  price: i.price,
                  price_usd: i.price,
                  price_discount: i.price_discount,
                  discount_percent: i.discount_percent,
                  is_leader_of_sales: i.is_leader_of_sales,
                  poster: i.poster,
                  poster_thumb: i.poster_thumb,
                  is_favorite: i.is_favorite,
                  is_cart: i.is_cart,
                  count: i.count,
                  power: i.power,
                };
                return <ProductCard key={product.id} product={product} />;
              })}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};
export default ProductsList;
