<script setup lang="ts">
import { ref } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
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 { SwatchFallback, SwatchImage } from '@/components/ui/swatch'
import { SwatchGroup, SwatchGroupItem } from '@/components/ui/swatch-group'
import type { PriceType } from '@/lib/format'
import { ArrowRightLeftIcon } from 'lucide-vue-next'

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
  description?: 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: 'Era 300',
      key: 'product-1',
      description: 'Premium smart speaker with spatial audio.',
      price: { amount: 49900, currency: 'EUR' },
      cover: { src: '/placeholder.svg' },
      rating: 4.8,
      reviewCount: 342,
      badge: 'Spatial Audio',
      siblings: {
        items: [
          { key: 'sibling-1', name: 'Black', colors: { exactColorHex: '#1A1A1A', exactColorName: 'Black' } },
          { key: 'sibling-2', name: 'White', colors: { exactColorHex: '#F5F5F5', exactColorName: 'White' } },
        ],
      },
    }),
  },
)

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

<template>
  <Card class="group overflow-hidden">
    <CardImage class="relative">
      <Image
        :src="product.cover?.src ?? '/placeholder.svg'"
        :alt="product.name"
        class="aspect-square w-full object-cover transition-transform duration-500 group-hover:scale-105"
      />
      <!-- Compare action -->
      <Button
        variant="ghost"
        size="sm"
        class="absolute left-3 top-3 h-7 gap-1.5 rounded-full bg-background/80 px-3 text-xs backdrop-blur-sm hover:bg-background"
      >
        <ArrowRightLeftIcon class="size-3" />
        Compare
      </Button>
      <!-- Feature badge -->
      <Badge
        v-if="product.badge"
        variant="default"
        class="absolute right-3 top-3"
      >
        {{ product.badge }}
      </Badge>
      <div v-if="product.clearout || product.inStore" class="absolute right-3 bottom-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>

    <CardContent class="space-y-3 pt-4">
      <div class="space-y-1">
        <h3 class="text-xl font-semibold">
          {{ product.name }}
        </h3>
        <p v-if="product.description" class="text-sm font-medium text-muted-foreground">
          {{ product.description }}
        </p>
        <Rating v-if="product.rating" :rating="product.rating" size="sm" />
      </div>

      <div class="flex items-center justify-between">
        <SwatchGroup
          v-if="product.siblings?.items?.length"
          v-model="selectedSibling"
          type="single"
          size="sm"
        >
          <SwatchGroupItem
            v-for="sibling in product.siblings.items.slice(0, 5)"
            :key="sibling.key"
            :value="sibling.key"
            :hex="sibling.colors?.exactColorHex"
          >
            <SwatchImage
              v-if="sibling.cover?.src"
              :src="sibling.cover.src"
              :alt="sibling.colors?.exactColorName ?? sibling.name"
            />
            <SwatchFallback />
          </SwatchGroupItem>
        </SwatchGroup>
        <Price :price="product.price" :show-ref="false" :show-discount="false" />
      </div>
    </CardContent>
  </Card>
</template>
Pfadfinder Plus

Schneezauber Explorer
