import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { catalogProducts } from "@/data/catalog";
import { Storefront } from "@/components/storefront";

type Props = { params: Promise<{ id: string }>; searchParams: Promise<{ variant?: string | string[] }> };
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params;
  const product = catalogProducts.find((item) => item.id === id);
  return product ? { title: `${product.name} — Fashion Mart`, description: product.description } : { title: "Product not found — Fashion Mart" };
}
export default async function ProductRoute({ params, searchParams }: Props) {
  const { id } = await params;
  const product = catalogProducts.find((item) => item.id === id);
  if (!product) notFound();
  const query = await searchParams;
  const variantId = Array.isArray(query.variant) ? query.variant[0] : query.variant;
  const initialVariantId = product.variants.some((variant) => variant.id === variantId) ? variantId : undefined;
  return <Storefront detailProduct={product} initialDetailVariantId={initialVariantId} />;
}