<template>
    <div class="seller-sales">
        <h2>{{ $t(title + 'Sales') }}</h2>
        <ul>
            <li v-for="(item, i) in items[title]" :key="i">
                <p>
                    {{ numberFormat(item.value) }} <span>{{ suffix[title] }}</span>
                </p>
                <span>{{ item.label }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
defineProps(['title'])

const {
    salesCurrentWeek = 0, salesAgoWeek = 0, salseAgoMonth = 0,
    oneDayAgo = 0, oneWeekAgo = 0, oneMonthAgo = 0
} = inject('data')

const items = reactive({
    status: [
        { label: 'فروش هفته جاری', value: salesCurrentWeek },
        { label: 'فروش هفته گذشته', value: salesAgoWeek },
        { label: 'فروش ماه گذشته', value: salseAgoMonth },
    ],
    number: [
        { label: 'تعداد کالای فروش رفته هفته جاری', value: oneDayAgo },
        { label: 'تعداد کالای فروش رفته هفته گذشته', value: oneWeekAgo },
        { label: 'تعداد کالای فروش رفته ماه گذشته', value: oneMonthAgo },
    ]
})

const suffix = reactive({ status: 'ریال', number: 'عدد' })

const numberFormat = (number) =>
    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
</script>

<style lang="scss" scoped>
.seller-sales {
    @apply w-full md:w-[21.4rem] lg:w-[28.1rem] flex flex-col pt-[1.1rem] gap-[1.1rem] lg:pt-5 lg:gap-5 rounded-[0.6rem] border-2 border-neutral-200;

    h2 {
        @apply text-[#333333] text-sm lg:text-lg font-medium font-vazir pr-[1.1rem] lg:pr-5;
    }

    ul {
        @apply w-full flex flex-col gap-6 lg:gap-[1.9rem] p-[1.1rem] lg:pt-6 border-t border-[#E5E5E5];

        li {
            @apply flex flex-col text-[#333333] [&>p]:first:text-[#47B556] font-medium font-vazir;

            p {
                @apply text-lg lg:text-2xl;
            }


            span {
                @apply text-xs lg:text-base;
            }
        }

    }
}
</style>