component ProductGrid {
  props {
    title = ""
    description = ""
    empty = false
    emptyText = "No items available."
    class = ""
  }

  view {
    <section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
      <div class="mx-auto w-full max-w-7xl">
        {#if title}<h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
        {#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}

        {#if empty}
          <div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-10 text-center text-[var(--wire-color-muted,#64748b)]">
            {emptyText}
          </div>
        {:else}
          <div class="mt-8 grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 xl:grid-cols-3 xl:gap-7 [&>*]:min-w-0 [&>*]:h-full">
            <slot />
          </div>
        {/if}
      </div>
    </section>
  }
}