<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/ui/button'
import ProductCardBasic from '@/components/ProductCardBasic.vue'

const sortBy = ref('featured')

const sortOptions = [
  { label: 'Featured', value: 'featured' },
  { label: 'Price: Low to High', value: 'price-asc' },
  { label: 'Price: High to Low', value: 'price-desc' },
  { label: 'Newest', value: 'newest' },
  { label: 'Best Selling', value: 'best-selling' },
]

const subcategories = ['All', 'Sneakers', 'Boots', 'Sandals', 'Loafers', 'Running']
const activeCategory = ref('All')

const c = 'EUR'
const products = [
  { name: 'Classic Leather Sneakers', manufacturer: { name: 'Urban Craft' }, price: { amount: 12999, currency: c, ref: 15999 }, cover: { src: '/placeholder.svg' }, rating: 4.5, reviewCount: 128, badge: 'Sale' },
  { name: 'Running Pro Max', manufacturer: { name: 'SportLine' }, price: { amount: 18999, currency: c }, cover: { src: '/placeholder.svg' }, rating: 4.8, reviewCount: 64, badge: 'New' },
  { name: 'Canvas Low Top', manufacturer: { name: 'StreetWear' }, price: { amount: 5999, currency: c }, cover: { src: '/placeholder.svg' }, rating: 4.2, reviewCount: 89 },
  { name: 'Suede High Top', manufacturer: { name: 'Urban Craft' }, price: { amount: 14999, currency: c }, cover: { src: '/placeholder.svg' }, rating: 4.6, reviewCount: 42 },
  { name: 'Minimal White', manufacturer: { name: 'Pure' }, price: { amount: 9999, currency: c }, cover: { src: '/placeholder.svg' }, rating: 4.4, reviewCount: 201 },
  { name: 'Retro Runner', manufacturer: { name: 'Heritage' }, price: { amount: 11999, currency: c }, cover: { src: '/placeholder.svg' }, rating: 4.3, reviewCount: 156, badge: 'Best Seller' },
  { name: 'Chelsea Boots', manufacturer: { name: 'CraftHouse' }, price: { amount: 19999, currency: c }, cover: { src: '/placeholder.svg' }, rating: 4.7, reviewCount: 33 },
  { name: 'Summer Slides', manufacturer: { name: 'Breeze' }, price: { amount: 4999, currency: c }, cover: { src: '/placeholder.svg' }, rating: 4.1, reviewCount: 78, badge: 'New' },
]
</script>

<template>
  <div>
    <!-- Hero -->
    <div class="bg-muted px-4 py-12 md:px-6 md:py-20">
      <div class="container mx-auto text-center">
        <h1 class="text-3xl font-bold md:text-4xl">
          Shoes
        </h1>
        <p class="mt-2 text-muted-foreground">
          {{ products.length }} products
        </p>
      </div>
    </div>

    <div class="container mx-auto px-4 py-6 md:px-6">
      <!-- Subcategory Tabs + Sort -->
      <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div class="flex flex-wrap gap-2">
          <button
            v-for="cat in subcategories"
            :key="cat"
            class="rounded-full border px-4 py-1.5 text-sm transition-colors"
            :class="activeCategory === cat ? 'border-foreground bg-foreground text-background' : 'hover:border-foreground/50'"
            @click="activeCategory = cat"
          >
            {{ cat }}
          </button>
        </div>
        <select
          v-model="sortBy"
          class="h-9 w-full rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring sm:w-48"
        >
          <option v-for="opt in sortOptions" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </option>
        </select>
      </div>

      <!-- Product Grid -->
      <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
        <ProductCardBasic
          v-for="(product, index) in products"
          :key="index"
          :product="product"
        />
      </div>

      <!-- Pagination -->
      <div class="mt-8 flex items-center justify-center gap-2">
        <Button variant="outline" size="sm" disabled>
          Previous
        </Button>
        <Button variant="outline" size="sm" class="bg-foreground text-background">
          1
        </Button>
        <Button variant="outline" size="sm">
          2
        </Button>
        <Button variant="outline" size="sm">
          3
        </Button>
        <Button variant="outline" size="sm">
          Next
        </Button>
      </div>
    </div>
  </div>
</template>