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

<template>
    <div
        class="overflow-hidden rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-850 dark:bg-slate-900"
    >
        <div class="flex items-center justify-between">
            <div class="flex-1 min-w-0">
                <p
                    class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 truncate"
                >
                    {{ title }}
                </p>
                <h4
                    class="mt-2 text-2xl font-bold tracking-tight text-slate-900 dark:text-white truncate"
                >
                    {{ value }}
                </h4>
                <p
                    v-if="subtitle"
                    class="mt-1 text-xs text-slate-500 dark:text-slate-400 truncate"
                >
                    {{ subtitle }}
                </p>
            </div>

            <div
                class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-slate-50 text-slate-500 dark:bg-slate-800 dark:text-slate-400 ml-4"
            >
                <slot name="icon">
                    <svg
                        class="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75m-.75-3h1.5m-1.5 0v-1.5m0 1.5H1.5m1.5 0c-.828 0-1.5.672-1.5 1.5v12a1.5 1.5 0 0 0 1.5 1.5h15a1.5 1.5 0 0 0 1.5-1.5v-12c0-.828-.672-1.5-1.5-1.5h-15Z"
                        />
                    </svg>
                </slot>
            </div>
        </div>
    </div>
</template>
