<script setup lang="ts">
import { ShoppingBag } from 'lucide-vue-next'
import { cn } from '~/lib/utils'

interface Props {
  /**
   * Additional CSS classes
   */
  class?: string
}

const props = defineProps<Props>()
</script>

<template>
  <Card :class="cn('', props.class)">
    <div class="flex flex-col items-center justify-center py-16 px-6 text-center space-y-6">
      <!-- Shopping Bag Icon -->
      <div
        class="flex items-center justify-center w-24 h-24 rounded-full bg-white/5 border-2 border-white/20"
      >
        <ShoppingBag class="w-12 h-12 text-white/60" stroke-width="1.5" />
      </div>

      <!-- Text Content -->
      <div class="space-y-2">
        <h2 class="text-2xl font-bold text-white">Dein Warenkorb ist leer</h2>
        <p class="text-white/70 max-w-md">
          Entdecke unsere Produkte und füge deine Favoriten zum Warenkorb hinzu.
        </p>
      </div>

      <!-- CTA Button -->
      <Button
        as-child
        class="mt-4 bg-gradient-button bg-size-300 bg-left hover:bg-right transition-all duration-300 font-bold text-white shadow-lg hover:shadow-2xl"
        size="lg"
      >
        <NuxtLink to="/products">
          Produkte entdecken
        </NuxtLink>
      </Button>
    </div>
  </Card>
</template>
