<script setup lang="ts">
import { BarChart3 } from '@lucide/vue'

import Card from '../ui/Card.vue'

defineProps<{
  year: number
  yearTotals: Array<{ label: string; value: number; note: string; icon: unknown }>
}>()
</script>

<template>
  <Card class="p-7">
    <div class="flex items-center justify-between gap-4">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.26em] text-violet-500">Jahreszahlen</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">Gesamtmetriken {{ year }}</h2>
      </div>
      <BarChart3 class="h-6 w-6 text-amber-500" />
    </div>

    <div class="mt-6 grid gap-3 sm:grid-cols-2">
      <div
        v-for="item in yearTotals"
        :key="item.label"
        class="rounded-[22px] border border-violet-100 bg-white/90 p-4"
      >
        <div class="flex items-start justify-between gap-3">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">{{ item.label }}</p>
            <strong class="mt-2 block text-3xl text-violet-900">{{ item.value.toLocaleString('de-DE') }}</strong>
          </div>
          <div class="grid h-9 w-9 place-items-center rounded-2xl bg-violet-100 text-violet-700">
            <component :is="item.icon" class="h-4 w-4" />
          </div>
        </div>
        <p class="mt-3 text-sm leading-5 text-slate-500">{{ item.note }}</p>
      </div>
    </div>
  </Card>
</template>
