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

<script setup>
const props = defineProps(['title'])

const {
    itemHighStock, zeroStock, returnedProducts, itemLowStock,
    oneWeekAgo, oneDayAgo, pendingProducts = [], receivedProducts,
} = inject('data')

const items = reactive({
    warehouse: [
        { label: 'کالاهای موجود', value: itemHighStock },
        { label: 'کالاهای بدون موجودی', value: zeroStock },
        { label: 'کالاهای مرجوعی یک هفته گذشته', value: returnedProducts },
        { label: 'کالاهای در حال اتمام موجودی', value: itemLowStock },
    ],
    orders: [
        { label: 'سفارشات این هفته', value: oneWeekAgo },
        { label: 'سفارش های امروز', value: oneDayAgo },
        { label: 'سفارش های پذیرش نشده', value: pendingProducts.length },
        { label: 'سفارش های ارسال شده', value: receivedProducts },
    ]
})
</script>

<style lang="scss">
.seller-management {
    @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 justify-between items-center text-[#333333] font-medium font-vazir;

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

            span {
                @apply text-sm lg:text-xl;
            }
        }

    }
}
</style>