<template>
  <article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
    <div class="flex items-start justify-between gap-4">
      <div>
        <p class="text-sm font-semibold text-slate-500">{{ label }}</p>
        <p class="mt-3 text-3xl font-black">{{ value }}</p>
      </div>
      <span class="rounded-2xl px-3 py-1 text-xs font-bold" :class="toneClass">{{ tone }}</span>
    </div>
    <p class="mt-4 text-sm text-slate-500">{{ helper }}</p>
  </article>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  label: String,
  value: [String, Number],
  helper: String,
  tone: { type: String, default: 'live' },
});

const toneClass = computed(() => ({
  'bg-blue-50 text-blue-700': props.tone === 'live',
  'bg-emerald-50 text-emerald-700': props.tone === 'ok',
  'bg-amber-50 text-amber-700': props.tone === 'warn',
  'bg-rose-50 text-rose-700': props.tone === 'risk',
}));
</script>
