'use client'

import Link from 'next/link'
import ProductCard from '@/components/frontend/ProductCard'
import type { CategoryProductsBlock } from '@/lib/db/queries/getCategoryProducts'

interface CategoryProductsClientProps {
  blocks: CategoryProductsBlock[]
  viewAllLabel: string
}

// Client-only for ProductCard's add-to-cart interactivity — data (categories,
// products, translated copy) is fetched server-side by CategoryProducts.tsx,
// see DATA_FETCHING_PATTERN.md. `viewAllLabel` is a plain string, not a
// function, so it can cross the Server->Client boundary.
export default function CategoryProductsClient({ blocks, viewAllLabel }: CategoryProductsClientProps) {
  return (
    <div className="my-16 space-y-16">
      {blocks.map((block) => (
        <div key={block.categoryId}>
          <div className="flex justify-between items-center mb-6">
            <h3 className="text-2xl font-bold">{block.title}</h3>
            <Link href={`/category/${block.slug}`} className="text-primary font-semibold hover:underline">
              {viewAllLabel} →
            </Link>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {block.products.map((product) => (
              <ProductCard
                key={product.id}
                id={product.id}
                title={product.title}
                price={product.price}
                oldPrice={product.oldPrice}
                image={product.imageUrl ?? '📦'}
                slug={product.slug}
                productType={product.type}
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}