<script setup lang="ts">

import { VbenIcon } from '@vben/common-ui';

defineOptions({
  name: 'StatisticsReconciliation',
});

const props = defineProps({
  statistics: {
    required: true,
  },
});

const formattedValue = (value: number | string, unit?: string) => {
  if (typeof value === 'number') {
    const numberValue = value.toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
    return unit ? `${unit}${numberValue}` : numberValue;
  }
  return value;
};
</script>

<template>
  <div class="grid grid-cols-4 gap-4 p-4 md:grid-cols-6 lg:grid-cols-8">
    <div
      v-for="(item, index) in props.statistics"
      :key="index"
      class="rounded-lg border p-4 shadow-sm"
    >
      <div class="flex items-center gap-3">
        <div
          :class="`rounded-lg p-2 ${item.color} bg-opacity-10`"
          aria-hidden="true"
        >
          <VbenIcon :icon="item.icon" class="h-5 w-5" />
        </div>
        <div>
          <p class="text-sm text-gray-500">{{ item.title }}</p>
          <p class="mt-1 text-lg font-semibold">
            {{ formattedValue(item.value, item.unit) }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
