<script setup>
import AppIcon from './AppIcon.vue';
import { boot, taka } from '../format';

const props = defineProps({
    summary: { type: Object, required: true },
    grandTotal: { type: Number, default: 0 },
    categoryCount: { type: Number, default: 0 },
    isFiltered: { type: Boolean, default: false },
});
</script>

<template>
    <section class="tiles">
        <div class="tile is-hero">
            <div class="tile-icon"><AppIcon name="coins" :size="19"/></div>
            <div class="tile-label">{{ isFiltered ? 'ফিল্টার করা মোট' : 'সর্বমোট খরচ' }}</div>
            <div class="tile-value tabular">{{ taka(summary.total) }}</div>
            <div class="tile-note tabular">
                <template v-if="isFiltered">সর্বমোট {{ taka(grandTotal) }}</template>
                <template v-else>{{ boot.period.duration }}</template>
            </div>
        </div>

        <div class="tile">
            <div class="tile-icon"><AppIcon name="list" :size="19"/></div>
            <div class="tile-label">এন্ট্রি সংখ্যা</div>
            <div class="tile-value tabular">{{ summary.count }}</div>
            <div class="tile-note">{{ categoryCount }} টি ক্যাটাগরি</div>
        </div>

        <div class="tile">
            <div class="tile-icon"><AppIcon name="gauge" :size="19"/></div>
            <div class="tile-label">গড় খরচ</div>
            <div class="tile-value tabular">{{ taka(Math.round(summary.average)) }}</div>
            <div class="tile-note">প্রতি এন্ট্রিতে</div>
        </div>

        <div class="tile">
            <div class="tile-icon"><AppIcon name="trending-up" :size="19"/></div>
            <div class="tile-label">সবচেয়ে বড় খরচ</div>
            <div class="tile-value tabular">{{ taka(summary.largest) }}</div>
            <div class="tile-note">একক এন্ট্রি</div>
        </div>
    </section>
</template>
