<script setup lang="ts">
import { ShoppingCart } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'

// TODO: This will come from cart store/composable in Phase 5
const cartItemCount = ref(0)

const hasItems = computed(() => cartItemCount.value > 0)
</script>

<template>
  <NuxtLink
    to="/cart"
    class="relative inline-flex items-center justify-center rounded-full p-3 transition-all hover:bg-experimenta-accent/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2"
    aria-label="Warenkorb"
  >
    <ShoppingCart class="h-6 w-6 text-foreground" />

    <!-- Item count badge -->
    <Transition
      enter-active-class="transition-all duration-200 ease-out"
      enter-from-class="scale-0 opacity-0"
      enter-to-class="scale-100 opacity-100"
      leave-active-class="transition-all duration-150 ease-in"
      leave-from-class="scale-100 opacity-100"
      leave-to-class="scale-0 opacity-0"
    >
      <Badge
        v-if="hasItems"
        class="absolute -top-1 -right-1 h-5 min-w-[20px] px-1 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-white dark:border-zinc-950"
      >
        {{ cartItemCount > 99 ? '99+' : cartItemCount }}
      </Badge>
    </Transition>

    <!-- Pulse animation when items are added (optional) -->
    <span
      v-if="hasItems"
      class="absolute inset-0 rounded-full bg-experimenta-accent/20 animate-ping opacity-75"
      aria-hidden="true"
    />
  </NuxtLink>
</template>
