<script setup lang="ts">
import { ref } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardImage } from '@/components/ui/card'
import { Image } from '@/components/ui/image'
import { Price } from '@/components/ui/price'
import { Rating } from '@/components/ui/rating'
import { SwatchGroup, SwatchGroupItem } from '@/components/ui/swatch-group'
import type { PriceType } from '@/lib/format'

interface Sibling {
  key: string
  name?: string
  cover?: { src?: string }
  link?: { path?: string }
  colors?: {
    mainColorHex?: string
    exactColorHex?: string
    exactColorName?: string
  }
}

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?: Sibling[] }
}

const props = withDefaults(
  defineProps<{
    product?: Product
  }>(),
  {
    product: () => ({
      name: 'Basic Tee',
      key: 'product-1',
      price: { amount: 3500, currency: 'EUR' },
      cover: { src: '/placeholder.svg' },
      rating: 4.2,
      reviewCount: 64,
      siblings: {
        items: [
          { key: 'sibling-1', name: 'Black', colors: { exactColorHex: '#1A1A1A', exactColorName: 'Black' } },
          { key: 'sibling-2', name: 'White', colors: { exactColorHex: '#FFFFFF', exactColorName: 'White' } },
          { key: 'sibling-3', name: 'Heather Grey', colors: { exactColorHex: '#9CA3AF', exactColorName: 'Heather Grey' } },
        ],
      },
    }),
  },
)

const selectedSibling = ref(props.product.key ?? props.product.siblings?.items?.[0]?.key ?? '')
</script>

<template>
  <Card class="group overflow-hidden">
    <a :href="product.link?.path ?? '#'">
      <CardImage class="relative">
        <Image
          :src="product.cover?.src ?? '/placeholder.svg'"
          :alt="product.name"
          class="aspect-square w-full object-cover transition-opacity duration-200 group-hover:opacity-75"
        />
        <Badge
          v-if="product.badge"
          variant="default"
          color="promo"
          class="absolute left-3 top-3"
        >
          {{ product.badge }}
        </Badge>
        <div v-if="product.clearout || product.inStore" class="absolute right-3 top-3 flex flex-col gap-1">
          <Badge v-if="product.clearout" variant="default" color="discount">
            Clearout
          </Badge>
          <Badge v-if="product.inStore" variant="default" color="positive">
            In Store
          </Badge>
        </div>
      </CardImage>
    </a>
    <CardContent class="flex items-start justify-between pt-4">
      <div class="space-y-1">
        <h3 class="text-sm font-medium">
          {{ product.name }}
        </h3>
        <Rating v-if="product.rating" :rating="product.rating" size="sm" />
        <SwatchGroup
          v-if="product.siblings?.items?.length"
          v-model="selectedSibling"
          type="single"
          size="sm"
        >
          <SwatchGroupItem
            v-for="sibling in product.siblings.items.slice(0, 4)"
            :key="sibling.key"
            :value="sibling.key"
            :hex="sibling.colors?.exactColorHex"
          />
        </SwatchGroup>
      </div>
      <Price size="sm" :price="product.price" :show-ref="false" :show-discount="false" />
    </CardContent>
  </Card>
</template>
Avalanche Guard

Schneesturm Überlebensjacke

Winterwunder Skibrille

Polarstern Snowboardbrille
