<template>
    <div class="seller-details-product">
        <div>
            <h2>{{ title }}</h2>
            <Button icon="isax isax-close-circle" severity="secondary" rounded link @click="dialog.close()" />
        </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 { title = 'هارددیسک اکسترنال ای دیتا مدل HM900 ظرفیت 4 ترابایت' } = reactive({})
const items = reactive({
    salesPrice: "242,523",
    inventory: "1",
    status: "دارای رقیب",
})
</script>

<style lang="scss">
.seller-details-product {
    @apply flex flex-col gap-[1.9rem] px-6 py-[1.1rem] rtl;

    &>div {
        @apply flex items-center justify-between gap-1.5;

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

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

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

    &>ul {
        @apply felx 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>