<script setup lang="ts">
import Card from '../ui/Card.vue'

defineProps<{
  maxCategoryValue: number
  topCategoryTitle: string
  topCategoryTotalLabel: string
  topCategories: Array<{ category: string; value: number; basis: string }>
}>()
</script>

<template>
  <Card class="p-7">
    <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.26em] text-violet-500">Kategorie-Performance</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">{{ topCategoryTitle }}</h2>
      </div>
      <p class="text-sm text-slate-500">{{ topCategoryTotalLabel }}</p>
    </div>

    <div class="mt-6 space-y-4">
      <div
        v-for="(category, index) in topCategories"
        :key="category.category"
        class="rounded-[24px] border border-violet-100 bg-white/90 p-4"
      >
        <div class="flex items-center justify-between gap-4">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">#{{ index + 1 }}</p>
            <h3 class="mt-1 font-semibold text-slate-800">{{ category.category }}</h3>
          </div>
          <strong class="text-lg text-violet-800">{{ Number(category.value).toLocaleString('de-DE') }}</strong>
        </div>
        <div class="mt-4 h-3 rounded-full bg-[#f7f2ff]">
          <div
            class="h-3 rounded-full bg-gradient-to-r from-[#c4b5fd] to-[#7c5cff]"
            :style="{ width: `${(category.value / maxCategoryValue) * 100}%` }"
          />
        </div>
      </div>
      <p v-if="topCategories.length === 0" class="rounded-[24px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
        Noch keine Kategorie-Signale für dieses Jahr.
      </p>
    </div>
  </Card>
</template>
