import Filter from "./filter";
import FilterInfo from "./filterInfo";
import ProductCard from "./productCard";

export function Products() {
  return (
    <div className="bg-[#1e1d1c] py-20">
      <div className="max-w-300 mx-auto w-full z-20 relative">
        <div className="flex items-start gap-5">
          {/* filter part */}
          <Filter/>

          {/* main products */}
          <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
            {Array(9)
              .fill(null)
              .map((_, index) => (
                <ProductCard
                  key={index}
                  title="Elektr yong'in detektori-Ypres ver.2"
                  name="P-0834404"
                  image="/images/products/products.webp"
                  slug="P_0834404"
                  status="full"
                />
              ))}
          </div>
          <FilterInfo/>
        </div>
      </div>
    </div>
  );
}