<template>
  <div class="col br-right">
    <div :class="`inner-${align} ${align === 'left' ? 'ps-3' : 'pe-3'}`">
      <p>{{ title }}</p>
      <h3 :id="numberId">{{ number }}</h3>
      <span>{{ unit }}</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title:    { type: String, default: '' },
  number:   { type: [Number, String], default: 0 },
  unit:     { type: String, default: '' },
  align:    { type: String, default: 'left', validator: v => ['left', 'right'].includes(v) },
  numberId: { type: String, default: '' },
})
</script>
