import { ProductM } from '@shared/interfaces'
import ProductItem from "../ProductItem";
import Pagination from "./Pagination";

interface Props {
  products: ProductM[];
  counts: number;
}

const ProductList: React.FC<Props> = ({ products, counts }) => {
  return (
    <>
      {counts > 0 ? (
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
          {products.map((item) => (
            <ProductItem
              key={item._id}
              _id={item._id}
              name={item.name}
              categories={item.categories as any}
              brand={item.brand as any}
              image={item.image as string}
              description={item.description as string}
            />
          ))}
        </div>
      ) : (
        <div>Hiç Ürün Bulunamadı</div>
      )}

      {counts > 10 && 
      <div className=" w-full mt-4"> <Pagination counts={counts} /> </div> }
    </>
  );
};

export default ProductList;