<script setup lang="ts">
import { ref, computed } from 'vue'
import { Button } from '@/components/ui/button'
import { Price } from '@/components/ui/price'
import { Trash2Icon } from 'lucide-vue-next'

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 emit = defineEmits<{
  'update:items': [items: CartItem[]]
}>()

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)

function updateItems(newItems: CartItem[]) {
  if (props.items) {
    emit('update:items', newItems)
  } else {
    internalItems.value = newItems
  }
}

function updateQuantity(id: string, qty: number) {
  if (qty < 1 || qty > 10) return
  updateItems(currentItems.value.map(i => i.id === id ? { ...i, quantity: qty } : i))
}

function removeItem(id: string) {
  updateItems(currentItems.value.filter(i => i.id !== id))
}
</script>

<template>
  <div class="space-y-4">
    <div
      v-for="item in currentItems"
      :key="item.id"
      class="flex gap-4 rounded-lg border p-4"
    >
      <img
        :src="item.image"
        :alt="item.name"
        class="size-24 rounded-md object-cover md:size-28"
      />
      <div class="flex flex-1 flex-col justify-between">
        <div class="flex items-start justify-between">
          <div>
            <h3 class="text-sm font-medium">{{ item.name }}</h3>
            <p class="text-xs text-muted-foreground">{{ item.variant }}</p>
          </div>
          <Button
            variant="ghost"
            size="icon-sm"
            class="text-muted-foreground hover:text-destructive"
            @click="removeItem(item.id)"
          >
            <Trash2Icon class="size-4" />
            <span class="sr-only">Remove {{ item.name }}</span>
          </Button>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <Button
              variant="outline"
              icon
              class="size-8"
              :disabled="item.quantity <= 1"
              @click="updateQuantity(item.id, item.quantity - 1)"
            >
              −
            </Button>
            <span class="w-8 text-center text-sm">{{ item.quantity }}</span>
            <Button
              variant="outline"
              icon
              class="size-8"
              :disabled="item.quantity >= 10"
              @click="updateQuantity(item.id, item.quantity + 1)"
            >
              +
            </Button>
          </div>
          <Price class="text-sm font-medium" :price="{ amount: item.price.amount * item.quantity, currency }" />
        </div>
      </div>
    </div>
  </div>
</template>
Riverside Reflexionen

PeakView Alpin-Sonnenbrille

Pinnacle Climb Multi-Sport-Brille
