"use client";

import type { ProductCardProps } from "@/components/product/ProductCard";
import { ProductCard } from "@/components/product/ProductCard";
import { ProductListTile } from "@/components/product/ProductListTile";

export type ShopProductGridProduct = ProductCardProps & { id: string };

/**
 * Product grid/list wrapper: mobile-first.
 * - Mobile: single-column list using ProductListTile.
 * - Tablet/desktop (md:): grid 2/3/4 columns using ProductCard.
 */
export function ShopProductGrid({
  products,
}: {
  products: ShopProductGridProduct[];
}) {
  return (
    <>
      {/* Mobile: list view */}
      <ul
        className="flex flex-col gap-3 md:hidden"
        aria-label="Product list"
      >
        {products.map(({ id, ...props }) => (
          <li key={id}>
            <ProductListTile {...props} />
          </li>
        ))}
      </ul>
      {/* Tablet and up: grid */}
      <div className="hidden md:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
        {products.map(({ id, ...props }) => (
          <ProductCard key={id} {...props} />
        ))}
      </div>
    </>
  );
}
