<script setup lang="ts">
import { Image } from '@/components/ui/image'

interface CategoryItem {
  title: string
  href: string
  image: string
  imageAlt?: string
}

withDefaults(defineProps<{
  heading?: string
  browseAllLabel?: string
  browseAllHref?: string
  categories?: CategoryItem[]
}>(), {
  heading: 'Shop by Category',
  browseAllLabel: 'Browse all categories',
  browseAllHref: '/categories',
  categories: () => [
    {
      title: 'New Arrivals',
      href: '/category/new-arrivals',
      image: '/placeholder.svg',
      imageAlt: 'New arrivals collection',
    },
    {
      title: 'Accessories',
      href: '/category/accessories',
      image: '/placeholder.svg',
      imageAlt: 'Accessories collection',
    },
    {
      title: 'Workspace',
      href: '/category/workspace',
      image: '/placeholder.svg',
      imageAlt: 'Workspace collection',
    },
  ],
})
</script>

<template>
  <section class="bg-muted/40">
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
      <div class="sm:flex sm:items-baseline sm:justify-between">
        <h2 class="text-2xl font-bold tracking-tight">
          {{ heading }}
        </h2>
        <a
          :href="browseAllHref"
          class="hidden text-sm font-semibold text-primary hover:text-primary/80 sm:block"
        >
          {{ browseAllLabel }}
          <span aria-hidden="true"> &rarr;</span>
        </a>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:grid-rows-2 sm:gap-x-6 lg:gap-8">
        <a
          v-for="(category, index) in categories.slice(0, 3)"
          :key="category.title"
          :href="category.href"
          class="group relative overflow-hidden rounded-lg"
          :class="[
            index === 0
              ? 'aspect-[2/1] sm:row-span-2 sm:aspect-square'
              : 'aspect-[2/1] sm:aspect-auto',
          ]"
        >
          <Image
            :src="category.image"
            :alt="category.imageAlt || category.title"
            class="absolute inset-0 size-full object-cover transition-opacity group-hover:opacity-75"
          />
          <div
            aria-hidden="true"
            class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50"
          />
          <div class="absolute inset-0 flex items-end p-6">
            <div>
              <h3 class="font-semibold text-white">
                {{ category.title }}
              </h3>
              <p aria-hidden="true" class="mt-1 text-sm text-white/80">
                Shop now
              </p>
            </div>
          </div>
        </a>
      </div>

      <div class="mt-6 sm:hidden">
        <a
          :href="browseAllHref"
          class="block text-sm font-semibold text-primary hover:text-primary/80"
        >
          {{ browseAllLabel }}
          <span aria-hidden="true"> &rarr;</span>
        </a>
      </div>
    </div>
  </section>
</template>
Shop by Category

Beanies

Beanies

Helmet
