<script setup lang="ts">
import ProductCardBasic from '@/components/ProductCardBasic.vue'
import type { PriceType } from '@/lib/format'

interface Product {
  name?: string
  key?: string
  link?: { path?: string }
  price: PriceType
  cover?: { src?: string }
  rating?: number
  reviewCount?: number
  badge?: string
  clearout?: boolean
  inStore?: boolean
  siblings?: {
    items?: {
      key: string
      name?: string
      cover?: { src?: string }
      link?: { path?: string }
      colors?: {
        mainColorHex?: string
        exactColorHex?: string
        exactColorName?: string
      }
    }[]
  }
}

withDefaults(
  defineProps<{
    title?: string
    products?: Product[]
  }>(),
  {
    title: 'Customers also purchased',
    products: () => [
      {
        name: 'Basic Tee',
        key: 'product-1',
        price: { amount: 3500, currency: 'EUR' },
        cover: { src: '/placeholder.svg' },
        rating: 4.5,
      },
      {
        name: 'Basic Tee',
        key: 'product-2',
        price: { amount: 3500, currency: 'EUR' },
        cover: { src: '/placeholder.svg' },
        rating: 4.0,
      },
      {
        name: 'Basic Tee',
        key: 'product-3',
        price: { amount: 3500, currency: 'EUR' },
        cover: { src: '/placeholder.svg' },
        rating: 3.5,
      },
      {
        name: 'Artwork Tee',
        key: 'product-4',
        price: { amount: 3500, currency: 'EUR' },
        cover: { src: '/placeholder.svg' },
        rating: 4.2,
      },
    ],
  },
)
</script>

<template>
  <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
    <ProductCardBasic
      v-for="(product, index) in products"
      :key="product.key ?? index"
      :product="product"
    />
  </div>
</template>
Customers also purchased

Winterwunder Skibrille

Gipfelstürmer Ausflugjacke

Schneesturm Überlebensjacke

Avalanche Guard
