import ProductCard from '@/components/sharedComponents/cards/ProductCard';
import EmptyProducts from '../empty/EmptyProducts';
import AppPagination from '../../UiComponents/Pagination/AppPagination';
import React from 'react';
import TraderCard from '../cards/TraderCard';

interface ProductsGridProps {
  products: any[];
  metaData?: any;
  header?: React.ReactNode;
  className?: string;
  customEmptyContent?: React.ReactNode;
  type?:"product" | "trader";
}

const ProductsGrid: React.FC<ProductsGridProps> = ({ products, metaData, customEmptyContent, header, className,type = "product" }) => {

  return (
    <>
      {products?.length > 0 ? (
        <>
          {header && <div>{header}</div>}
          <div className={`col-span-2 my-8 grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-5 ${className || ''}`}>
            {products.map((product) => (
              type == "trader" || product.company_name? <TraderCard key={`trader_card_${product?.id}`}  cardData={product}/> : <ProductCard key={`product_card_${product.id}`} product={product} />
            ))}
            {metaData && (
              <div className="col-span-2 lg:col-span-3 xl:col-span-4 flex-center-content w-full">
                <AppPagination initialData={metaData} />
              </div>
            )}
          </div>
        </>
      ) : (
        customEmptyContent ? customEmptyContent : <EmptyProducts />
      )}
    </>
  );
};

export default ProductsGrid;