<template>
  <div
    class="bg-gray-200 rounded-sm p-2 flex flex-col gap-1 text-xs text-gray-600"
  >
    <span>{{ title }}</span>
    <span class="text-gray-900">
      <span>{{ number === null || number === undefined ? '--' : number }}</span>
      {{ unit }}
    </span>
  </div>
</template>

<script lang="ts" setup>
type Props = {
  title: string;
  number?: number;
  unit: '个' | '人' | '元';
};

defineProps<Props>();
</script>
