<template>
    <div class="product-comments-sort">
        <div>
            <Button icon="pi pi-times" link @click="$emit('close')" />
            <h2>{{ $t("sortBy") }}</h2>
        </div>
        <ul>
            <li v-for="(item, key) in items" :key="key">
                <h3 @click="events.select(key)" v-ripple>
                    {{ item.title }}
                </h3>
                <i v-if="item.selected" class="pi pi-check"></i>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { t } = useI18n();
const items = reactive({
    newest: { title: t("newest"), selected: true },
    mostUseful: { title: t("mostUseful") },
});

const events = reactive({
    select: (key) => {
        items.newest.selected = false;
        items.mostUseful.selected = false;
        items[key].selected = true;
    },
});
</script>

<style lang="scss">
.product-comments-sort {
    @apply w-full flex flex-col gap-9 p-6 bg-white rounded-t-[0.6rem];

    &>div {
        @apply flex items-center gap-3;

        &>button {
            @apply -mx-4 -my-3 text-[#333333] #{!important};
        }

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

    &>ul {
        @apply w-full flex flex-col gap-4;

        &>li {
            @apply flex items-center justify-between pb-4 first:border-b text-[#333333];

            h3 {
                @apply text-xs font-medium font-vazir;
            }
        }
    }
}
</style>
