<template>
    <div class="rounded-2xl border border-slate-200 bg-white p-5">
        <p class="text-sm text-slate-500">{{ title }}</p>
        <p class="mt-2 text-2xl font-semibold">
            {{ value?.toLocaleString?.() ?? value }}
        </p>
        <p v-if="hint" class="mt-3 text-xs text-slate-400">
            {{ hint }}
        </p>
    </div>
</template>

<script setup>
defineProps({
    title: {
        type: String,
        required: true,
    },
    value: {
        type: [String, Number],
        default: '—',
    },
    hint: {
        type: String,
        default: '',
    },
});
</script>
