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

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

defineProps<{
  queueItems: Array<{ label: string; value: number; to: string; hint: string; icon: unknown; tone: string }>
}>()
</script>

<template>
  <Card class="p-6">
    <div class="flex items-center justify-between gap-4">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Team-Queue</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">Was offen ist</h2>
      </div>
    </div>

    <div class="mt-5 space-y-3">
      <RouterLink
        v-for="item in queueItems"
        :key="item.label"
        :to="item.to"
        class="group block rounded-[22px] border border-violet-100 bg-white/85 p-4 transition hover:-translate-y-0.5 hover:border-violet-200 hover:bg-violet-50/70"
      >
        <div class="flex items-center justify-between gap-4">
          <div class="flex min-w-0 items-center gap-3">
            <div
              class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl"
              :class="{
                'bg-violet-100 text-violet-700': item.tone === 'violet',
                'bg-rose-100 text-rose-700': item.tone === 'rose',
                'bg-amber-100 text-amber-700': item.tone === 'amber',
                'bg-emerald-100 text-emerald-700': item.tone === 'emerald',
              }"
            >
              <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="text-sm leading-5 text-slate-500">{{ item.hint }}</p>
            </div>
          </div>
          <strong class="grid h-9 min-w-9 shrink-0 place-items-center rounded-full border border-violet-100 bg-white px-3 text-violet-800">
            {{ item.value.toLocaleString('de-DE') }}
          </strong>
        </div>
      </RouterLink>

      <p v-if="queueItems.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
        Für deine Rolle sind keine Dashboard-Queues sichtbar.
      </p>
    </div>
  </Card>
</template>
