<template>
  <div class="bg-white rounded-2xl shadow-sm flex flex-col justify-between aspect-square p-4">
    <h6 class="text-sm font-bold text-gray-500">{{ title }}</h6>
    <div class="flex-grow flex items-center justify-start">
      <p class="text-gray-900 font-bold text-2xl">
        {{ content }} <span class="text-sm text-gray-500">{{ details }}</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  content: string | number
  details?: string | number
}>()
</script>
