import { notFound } from "next/navigation";
import { ProductCard, ShopShell } from "@/components/shop-shell";
import { getShopBySlug, listProducts } from "@/lib/shop";

export default async function StorefrontPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const shop = await getShopBySlug(slug);
  if (!shop) notFound();
  const products = await listProducts(shop.id);

  return (
    <ShopShell shop={shop}>
      {products.length === 0 ? (
        <p className="opacity-70">{shop.locale === "en" ? "No products yet." : "لا توجد منتجات بعد."}</p>
      ) : (
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {products.map((item) => (
            <ProductCard
              key={item.id}
              href={`/shop/${shop.slug}/p/${item.id}`}
              title={item.title}
              price={item.price}
              currency={shop.currency}
              photo={item.photos[0] ? `/api/media/${item.photos[0]}` : undefined}
              template={shop.template}
            />
          ))}
        </div>
      )}
    </ShopShell>
  );
}