<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: 'Productivity',
      href: '/category/productivity',
      image: '/placeholder.svg',
      imageAlt: 'Productivity collection',
    },
    {
      title: 'Workspace',
      href: '/category/workspace',
      image: '/placeholder.svg',
      imageAlt: 'Workspace collection',
    },
    {
      title: 'Accessories',
      href: '/category/accessories',
      image: '/placeholder.svg',
      imageAlt: 'Accessories collection',
    },
    {
      title: 'Sale',
      href: '/category/sale',
      image: '/placeholder.svg',
      imageAlt: 'Sale collection',
    },
  ],
})
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
      <div class="flex items-center 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-4 flow-root">
        <div class="-my-2">
          <div class="relative box-content h-80 overflow-x-auto py-2 xl:overflow-visible">
            <div class="absolute flex gap-x-8 px-4 sm:px-6 lg:px-8 xl:relative xl:grid xl:grid-cols-5 xl:gap-x-8 xl:px-0">
              <a
                v-for="category in categories"
                :key="category.title"
                :href="category.href"
                class="group relative flex h-80 w-56 flex-col overflow-hidden rounded-lg p-6 xl:w-auto"
              >
                <span aria-hidden="true" class="absolute inset-0">
                  <Image
                    :src="category.image"
                    :alt="category.imageAlt || category.title"
                    class="size-full object-cover transition-opacity group-hover:opacity-75"
                  />
                </span>
                <span
                  aria-hidden="true"
                  class="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-background/80 to-transparent"
                />
                <span class="relative mt-auto text-center text-xl font-bold text-foreground">
                  {{ category.title }}
                </span>
              </a>
            </div>
          </div>
        </div>
      </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>