<script setup lang="ts">
import { RouterLink } from 'vue-router'

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

defineProps<{
  publicHealthItems: Array<{ label: string; state: 'ok' | 'warn' | 'danger' | 'info'; note: string; to: string; icon: unknown }>
}>()
</script>

<template>
  <Card class="p-6">
    <div>
      <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Public Health</p>
      <h2 class="mt-1 text-xl font-bold text-slate-900">Was die Community sieht</h2>
    </div>

    <div class="mt-5 grid gap-3 sm:grid-cols-2">
      <RouterLink
        v-for="item in publicHealthItems"
        :key="item.label"
        :to="item.to"
        class="rounded-[22px] border bg-white/85 p-4 transition hover:-translate-y-0.5 hover:bg-violet-50/60"
        :class="{
          'border-emerald-100': item.state === 'ok',
          'border-amber-100': item.state === 'warn',
          'border-rose-100': item.state === 'danger',
          'border-slate-100': item.state === 'info',
        }"
      >
        <div class="flex items-start gap-3">
          <div
            class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl"
            :class="{
              'bg-emerald-100 text-emerald-700': item.state === 'ok',
              'bg-amber-100 text-amber-700': item.state === 'warn',
              'bg-rose-100 text-rose-700': item.state === 'danger',
              'bg-slate-100 text-slate-600': item.state === 'info',
            }"
          >
            <component :is="item.icon" class="h-5 w-5" />
          </div>
          <div class="min-w-0">
            <p class="font-semibold text-slate-800">{{ item.label }}</p>
            <p class="mt-1 text-sm leading-5 text-slate-500">{{ item.note }}</p>
          </div>
        </div>
      </RouterLink>
    </div>

    <p v-if="publicHealthItems.length === 0" class="mt-5 rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
      Public-Health-Details sind für deine Rolle nicht sichtbar.
    </p>
  </Card>
</template>
