// app/products/page.tsx
import { createClient } from '@01.software/sdk'

export const dynamic = 'force-dynamic'

export default async function ProductsPage() {
  const client = createClient({
    publishableKey: process.env.NEXT_PUBLIC_SOFTWARE_PUBLISHABLE_KEY!,
    apiUrl: process.env.SOFTWARE_API_URL,
  })
  const page = await client.commerce.product.listingPage({
    limit: 24,
    basePath: '/products',
    emit: 'canonical-id',
  })
  if (page.cards.length === 0) return <p>No published products yet.</p>
  return (
    <ul>
      {page.cards.map((card) => (
        <li key={card.id}>
          <a href={card.href}>
            {typeof card.title === 'string'
              ? card.title
              : (card.title.en ?? card.title.ko ?? 'Untitled')}
          </a>
          <span>{card.priceRange.minPrice}</span>
          <ul aria-label="Options">
            {card.swatches.map((swatch) => (
              <li key={swatch.optionValueId}>
                <a href={swatch.href}>{swatch.label}</a>
              </li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  )
}

// app/products/error.tsx
'use client'

export default function ProductError({ reset }: { reset: () => void }) {
  return (
    <div role="alert">
      Catalog unavailable. <button onClick={reset}>Retry read</button>
    </div>
  )
}