<template>
    <div class="seller-details-best-selling">
        <div>
            <Button icon="isax isax-close-circle" severity="secondary" rounded link @click="dialog.close()" />
            <h2>{{ title }}</h2>
            <img :src="coverImage">
        </div>
        <ul>
            <li v-for="(value, key ) in items" :key="key">
                <label>{{ $t(key) }}</label>
                <span>{{ value }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
const dialog = inject('dialogRef')
const { product, quantity, total } = dialog.value.data
const { title, coverImagem, stockQuantity} = product

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

const items = reactive({
    salesNumber: quantity,
    salesPrice: numberFormat(total),
    inventory: stockQuantity,
    status: "دارای رقیب",
})
</script>

<style lang="scss">
.seller-details-best-selling {
    @apply flex flex-col bg-white rounded-t-[0.6rem] gap-[1.9rem] px-6 py-[1.1rem] rtl;

    &>div {
        @apply flex gap-1.5;

        h2 {
            @apply w-56 text-[#333333] text-sm font-medium font-vazir pt-0.5;
        }

        button {
            @apply -mx-4 -my-3;

            .p-button-icon {
                @apply text-lg text-[#B2B2B2] #{!important};
            }
        }

        img {
            @apply w-[3.8rem] h-[3.8rem] mr-auto;
        }
    }

    &>ul {
        @apply flex flex-col gap-[1.1rem] mt-1.5;

        li {
            @apply flex justify-between;

            label {
                @apply text-[#5D5D5D] text-xs font-vazir
            }

            span {
                @apply text-[#333333] text-xs font-medium font-vazir;
            }
        }
    }
}
</style>