<script setup lang="ts">
import { cn } from '~/lib/utils'

interface Props {
  /**
   * Grid title (e.g., "Unsere Jahreskarten")
   */
  title?: string
  /**
   * Grid description/subtitle
   */
  description?: string
  /**
   * Number of columns on desktop (default: 3)
   */
  columns?: 1 | 2 | 3 | 4
  /**
   * Additional CSS classes
   */
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  columns: 3,
})

// Generate grid column classes
const gridClass = computed(() => {
  const colMap = {
    1: 'md:grid-cols-1',
    2: 'md:grid-cols-2',
    3: 'md:grid-cols-3',
    4: 'md:grid-cols-4',
  }
  return colMap[props.columns]
})
</script>

<template>
  <section :class="cn('w-full', props.class)">
    <!-- Section Header -->
    <div v-if="title || description" class="mb-8 text-center">
      <h2
        v-if="title"
        class="mb-3 text-3xl font-bold text-white md:text-4xl"
      >
        {{ title }}
      </h2>
      <p v-if="description" class="mx-auto max-w-2xl text-base text-white/80 md:text-lg">
        {{ description }}
      </p>
    </div>

    <!-- Product Grid -->
    <div
      :class="
        cn(
          'grid grid-cols-1 gap-6 sm:grid-cols-2',
          gridClass,
        )
      "
    >
      <slot />
    </div>
  </section>
</template>
