<script setup lang="ts">
import { computed } from 'vue'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Price } from '@/components/ui/price'
import CartItemMinimal from '@/components/CartItemMinimal.vue'

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

const props = withDefaults(
  defineProps<{
    /** Line items to display */
    items?: SummaryItem[]
    /** Currency code */
    currency?: string
    /** Shipping cost in cents. 0 = free. */
    shippingCents?: number
    /** Tax amount in cents */
    taxCents?: number
    /** Whether to show the tax row */
    showTax?: boolean
    /** Label for the shipping row when free */
    freeShippingLabel?: string
  }>(),
  {
    items: undefined,
    currency: 'EUR',
    shippingCents: 0,
    taxCents: 0,
    showTax: true,
    freeShippingLabel: 'Free',
  },
)

const defaultItems: SummaryItem[] = [
  {
    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 summaryItems = computed(() => props.items ?? defaultItems)

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

const totalCents = computed(
  () => subtotalCents.value + props.shippingCents + props.taxCents,
)
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle class="text-base">Order Summary</CardTitle>
    </CardHeader>
    <CardContent class="space-y-4">
      <!-- Line items — composed from cart-item-03 -->
      <CartItemMinimal :items="summaryItems" :currency="currency" />

      <Separator />

      <!-- Totals -->
      <div class="space-y-2 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" class="text-positive">{{ freeShippingLabel }}</span>
          <Price v-else :price="{ amount: shippingCents, currency }" />
        </div>
        <div v-if="showTax" class="flex justify-between">
          <span class="text-muted-foreground">Tax</span>
          <Price :price="{ amount: taxCents, currency }" />
        </div>
      </div>

      <Separator />

      <div class="flex justify-between text-base font-semibold">
        <span>Total</span>
        <Price :price="{ amount: totalCents, currency }" />
      </div>
    </CardContent>
  </Card>
</template>
Schneesturm Überlebensjacke

Gipfelgriff Skihandschuhe

Gipfelstürmer Ausflugjacke
