<template>
    <div class="statCard">
        <div class="statCard__header">
            <h3 class="statCard__title">{{ title }}</h3>
            <div :class="['statCard__icon', `statCard__icon--${colorClass}`]">
                <slot name="icon"></slot>
            </div>
        </div>
        <div class="statCard__content">
            <span class="statCard__value">
                {{ isCurrency ? '$' : '' }}{{ formattedValue }}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'StatCard',
    props: {
        title: String,
        value: [Number, String],
        colorClass: String,
        isCurrency: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        formattedValue() {
            if (this.isCurrency) return this.value;
            return typeof this.value === 'number' ? this.value.toLocaleString() : this.value;
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../../../styles/admin/elements/metrics/statCard.less";
</style>
