<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    title: string
    value: number | string
    suffix?: string
    iconPath: string
    color?: string
  }>(),
  { suffix: '', color: '#3B82F6' },
)

const displayValue = computed(() => {
  const v = props.value
  if (typeof v === 'string') return v
  if (String(v).includes('.')) return Number(v).toFixed(2)
  return v.toLocaleString('zh-CN')
})
</script>

<template>
  <div
    class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md"
    :style="{ borderTopWidth: '3px', borderTopColor: props.color }"
  >
    <div class="mb-3 flex items-center justify-between">
      <span class="text-sm font-medium text-gray-500">{{ title }}</span>
      <div
        class="flex h-9 w-9 items-center justify-center rounded-lg text-[20px]"
        :style="{
          background: `${props.color}18`,
          color: props.color,
        }"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path :d="iconPath" />
        </svg>
      </div>
    </div>
    <div class="text-3xl font-bold tracking-tight text-gray-900">
      {{ displayValue
      }}<span v-if="suffix" class="ml-0.5 text-sm font-medium text-gray-400">{{
        suffix
      }}</span>
    </div>
  </div>
</template>
