<script setup lang="ts">
import { ref, computed } from 'vue'
import { Price } from '@/components/ui/price'

interface CartItem {
  id: string
  name: string
  variant: string
  price: { amount: number; currency: string }
  quantity: number
  image: string
}

const props = withDefaults(
  defineProps<{
    items?: CartItem[]
    currency?: string
  }>(),
  {
    items: undefined,
    currency: 'EUR',
  },
)

const defaultItems: CartItem[] = [
  {
    id: '1',
    name: 'Classic Leather Sneakers',
    variant: 'White / Size 42',
    price: { amount: 12999, currency: props.currency },
    quantity: 1,
    image: '/placeholder.svg',
  },
  {
    id: '2',
    name: 'Organic Cotton T-Shirt',
    variant: 'Navy / Size M',
    price: { amount: 3999, currency: props.currency },
    quantity: 2,
    image: '/placeholder.svg',
  },
  {
    id: '3',
    name: 'Slim Fit Chinos',
    variant: 'Khaki / Size 32',
    price: { amount: 7999, currency: props.currency },
    quantity: 1,
    image: '/placeholder.svg',
  },
]

const internalItems = ref<CartItem[]>(defaultItems)

const currentItems = computed(() => props.items ?? internalItems.value)
</script>

<template>
  <div class="flex flex-col gap-3">
    <div
      v-for="item in currentItems"
      :key="item.id"
      class="flex gap-3"
    >
      <img
        :src="item.image"
        :alt="item.name"
        class="size-12 shrink-0 rounded-md border object-cover"
      />
      <div class="flex flex-1 flex-col justify-center gap-0.5 overflow-hidden">
        <h3 class="truncate text-sm font-medium leading-tight">{{ item.name }}</h3>
        <div class="flex items-center justify-between">
          <span class="text-xs text-muted-foreground">Qty: {{ item.quantity }}</span>
          <Price class="text-sm" :price="{ amount: item.price.amount * item.quantity, currency }" />
        </div>
      </div>
    </div>
  </div>
</template>
Freestyle Navigator

Arctic Advancer

Winterzauber Fäustlinge
