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

defineProps<{
  metricCards: Array<{ label: string; value: number; note: string; icon: unknown }>
  liveSummary: string
  liveStatusBadge: string
  liveStatusTone: 'ok' | 'warn' | 'danger' | 'info'
}>()
</script>

<template>
  <Card class="overflow-hidden">
    <div class="border-b border-violet-100 bg-white/80 p-4">
      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div class="min-w-0">
          <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-violet-500">Live-Lage</p>
          <p class="mt-1 max-w-3xl text-sm leading-5 text-slate-600">
            {{ liveSummary }}
          </p>
        </div>
        <div
          class="inline-flex shrink-0 items-center rounded-xl border px-3 py-2 text-xs font-bold"
          :class="{
            'border-emerald-200 bg-emerald-50 text-emerald-700': liveStatusTone === 'ok',
            'border-amber-200 bg-amber-50 text-amber-700': liveStatusTone === 'warn',
            'border-rose-200 bg-rose-50 text-rose-700': liveStatusTone === 'danger',
            'border-slate-200 bg-slate-50 text-slate-600': liveStatusTone === 'info',
          }"
        >
          {{ liveStatusBadge }}
        </div>
      </div>
    </div>

    <div class="grid gap-3 p-4 md:grid-cols-2">
      <div
        v-for="metric in metricCards"
        :key="metric.label"
        class="rounded-2xl border border-violet-100 bg-white/90 p-4"
      >
        <div class="flex items-start justify-between gap-3">
          <div>
            <p class="text-[11px] font-bold uppercase tracking-[0.16em] text-violet-500">{{ metric.label }}</p>
            <strong class="mt-2 block text-2xl text-violet-900">{{ metric.value.toLocaleString('de-DE') }}</strong>
          </div>
          <div class="grid h-9 w-9 place-items-center rounded-xl bg-violet-50 text-violet-700">
            <component :is="metric.icon" class="h-4 w-4" />
          </div>
        </div>

        <div class="mt-3 rounded-xl border border-violet-100 bg-violet-50/50 px-3 py-2">
          <p class="text-xs font-semibold leading-5 text-slate-700">{{ metric.note }}</p>
        </div>
      </div>
    </div>
  </Card>
</template>
