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

defineProps<{
  operationChecks: Array<{ label: string; value: number; to: string; state: string; note: string }>
}>()
</script>

<template>
  <section class="grid gap-4 lg:grid-cols-3">
    <RouterLink
      v-for="check in operationChecks"
      :key="check.label"
      :to="check.to"
      class="rounded-[24px] border bg-white/85 p-5 shadow-[0_16px_42px_rgba(168,145,214,0.08)] transition hover:-translate-y-0.5 hover:bg-violet-50/50"
      :class="{
        'border-emerald-100': check.state === 'ok',
        'border-amber-100': check.state === 'warn',
        'border-rose-100': check.state === 'danger',
      }"
    >
      <div class="flex items-start justify-between gap-4">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">{{ check.label }}</p>
          <strong class="mt-3 block text-3xl" :class="check.state === 'danger' ? 'text-rose-700' : check.state === 'warn' ? 'text-amber-700' : 'text-emerald-700'">
            {{ check.value }}
          </strong>
          <p class="mt-2 text-sm leading-5 text-slate-500">{{ check.note }}</p>
        </div>
      </div>
    </RouterLink>
  </section>
</template>
