<script setup lang="ts">
import { computed, ref } from 'vue'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Price } from '@/components/ui/price'
import CartItemDetailed from '@/components/CartItemDetailed.vue'

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

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

const defaultItems: CartItemData[] = [
  {
    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 items = ref<CartItemData[]>(props.initialItems ?? defaultItems)

const subtotalCents = computed(() =>
  items.value.reduce((sum, item) => sum + item.price.amount * item.quantity, 0),
)

const shippingCents = computed(() => (subtotalCents.value > 10000 ? 0 : 599))
const totalCents = computed(() => subtotalCents.value + shippingCents.value)
</script>

<template>
  <div>
    <h1 class="mb-6 text-2xl font-semibold">
      Shopping Cart ({{ items.length }})
    </h1>

    <div v-if="items.length" class="grid gap-6 md:grid-cols-[1fr_320px]">
      <!-- Items -->
      <CartItemDetailed v-model:items="items" :currency="currency" />

      <!-- Summary -->
      <Card class="h-fit">
        <CardHeader>
          <CardTitle>Order Summary</CardTitle>
        </CardHeader>
        <CardContent class="space-y-3 text-sm">
          <div class="flex justify-between">
            <span class="text-muted-foreground">Subtotal</span>
            <Price :price="{ amount: subtotalCents, currency }" />
          </div>
          <div class="flex justify-between">
            <span class="text-muted-foreground">Shipping</span>
            <span v-if="shippingCents === 0">Free</span>
            <Price v-else :price="{ amount: shippingCents, currency }" />
          </div>
          <div class="border-t pt-3">
            <div class="flex justify-between text-base font-semibold">
              <span>Total</span>
              <Price :price="{ amount: totalCents, currency }" />
            </div>
          </div>
        </CardContent>
        <CardFooter class="flex flex-col gap-2">
          <Button class="w-full" color="checkout">
            Checkout
          </Button>
          <Button variant="link" class="w-full">
            Continue Shopping
          </Button>
        </CardFooter>
      </Card>
    </div>

    <!-- Empty State -->
    <div v-else class="py-20 text-center">
      <p class="text-4xl font-semibold">
        Your cart is empty
      </p>
      <p class="mt-2 text-muted-foreground">
        Add some items to get started.
      </p>
      <Button class="mt-6">
        Continue Shopping
      </Button>
    </div>
  </div>
</template>
Shopping Cart (3)

Riverside Reflexionen

PeakView Alpin-Sonnenbrille

Pinnacle Climb Multi-Sport-Brille
