<script setup lang="ts">
defineProps<{
  title: string;
  amount: number;
  icon: string;
  color: string;
  currency?: string;
}>();

const formatCurrency = (value: number, currency = 'RUB') => {
  return new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: currency,
  }).format(value);
};
</script>

<template>
  <div
    class="bg-white dark:bg-surface-900 rounded-2xl p-4 shadow-sm flex flex-col gap-2 border border-surface-100 dark:border-surface-800">
    <div class="flex items-center gap-3">
      <div :class="`p-2 rounded-xl !bg-${color}-50 !dark:bg-${color}-500/10 !text-${color}-500`">
        <i :class="icon" class="text-xl"></i>
      </div>
      <span class="text-surface-500 dark:text-surface-400 font-medium text-sm">{{ title }}</span>
    </div>
    <div class="flex flex-col">
      <span class="!text-2xl !font-bold text-surface-900 dark:text-surface-0"
        :class="amount < 0 ? '!text-red-500' : ''">
        {{ formatCurrency(amount, currency) }}
      </span>
    </div>
  </div>
</template>
