<script setup lang="ts">
import { ref, computed } from 'vue'
import { Button } from '@/components/ui/button'
import {
  NumberField,
  NumberFieldContent,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldInput,
} from '@/components/ui/number-field'
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) {
  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-3"
    >
      <img
        :src="item.image"
        :alt="item.name"
        class="size-20 rounded-md border object-cover"
      />
      <div class="flex flex-1 flex-col justify-between py-0.5">
        <div>
          <h3 class="text-sm font-medium leading-tight">{{ item.name }}</h3>
          <p class="mt-0.5 text-xs text-muted-foreground">{{ item.variant }}</p>
        </div>
        <div class="flex items-center justify-between">
          <NumberField
            :default-value="item.quantity"
            :min="1"
            :max="10"
            class="w-24"
            @update:model-value="(val: number) => updateQuantity(item.id, val)"
          >
            <NumberFieldContent>
              <NumberFieldDecrement />
              <NumberFieldInput />
              <NumberFieldIncrement />
            </NumberFieldContent>
          </NumberField>
          <div class="flex items-center gap-2">
            <Price class="text-sm font-medium" :price="{ amount: item.price.amount * item.quantity, currency }" />
            <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>
      </div>
    </div>
  </div>
</template>
Riverside Reflexionen

PeakView Alpin-Sonnenbrille

Pinnacle Climb Multi-Sport-Brille
