<template>
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <h3 class="text-xl font-black">{{ title }}</h3>
    <div class="mt-5 space-y-3">
      <div v-for="item in items" :key="item.name" class="rounded-2xl bg-slate-50 p-4">
        <div class="flex items-center justify-between gap-4">
          <p class="font-bold">{{ item.name }}</p>
          <span class="rounded-full bg-white px-3 py-1 text-xs font-bold uppercase text-slate-600">{{ item.status }}</span>
        </div>
        <p class="mt-2 text-sm text-slate-500">{{ formattedValue(item[valueKey]) }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: String,
  items: { type: Array, default: () => [] },
  valueKey: String,
  money: Boolean,
});

function formattedValue(value) {
  if (props.money) {
    return `BDT ${Number(value || 0).toLocaleString()}`;
  }

  return `${Number(value || 0).toLocaleString()} rows`;
}
</script>
