import { ca, lede, slt } from "@/lib/demoData";
import Filter from "./filter";
import FilterInfo from "./filterInfo";
import ProductCard from "./productCard";

// slt , ca , lede

export function Products({ categoryName }: { categoryName: string | null }) {
  console.log("category name: ",categoryName)
  const getProducts = () => {
    switch (categoryName) {
      case "slt":
        return slt;
      case "ca":
        return ca;
      case "lede":
        return lede;
      default:
        return [...slt, ...ca, ...lede];
    }
  };

  const products = getProducts();
  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">
            {products.map((item, index) => (
              <ProductCard
                key={index}
                title={item.name}
                image={item.image}
                slug={item.slug}
              />
            ))}
          </div>
          <FilterInfo />
        </div>
      </div>
    </div>
  );
}