<template>
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <div class="flex items-center justify-between gap-4">
      <h3 class="text-xl font-black">{{ title }}</h3>
      <span v-if="badge" class="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold uppercase text-slate-600">{{ badge }}</span>
    </div>
    <div class="mt-5 space-y-3">
      <div v-for="(item, index) in items" :key="index" class="rounded-2xl bg-slate-50 p-4">
        <div class="grid gap-2 md:grid-cols-3">
          <div v-for="(value, key) in item" :key="key">
            <p class="text-xs font-bold uppercase tracking-wide text-slate-400">{{ label(key) }}</p>
            <p class="mt-1 font-semibold text-slate-800">{{ value }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  badge: String,
  items: { type: Array, default: () => [] },
});

function label(value) {
  return String(value).replaceAll('_', ' ');
}
</script>
