<template>
    <div class="sort">
        <h3>
            <i class="isax isax-document-filter"></i>
            <span>{{ $t('sortBy') }}:</span>
        </h3>
        <ul>
            <li v-for="(btn, key) in btns.sort" :key="key">
                <Button v-bind="btn.props" @click="sort(key)" :active="sorted == key" />
            </li>
        </ul>
    </div>
</template>

<script setup>
const { btns } = inject('init')
let { comments } = inject('data')
const sorted = ref('createdAt')
const sort = (key) => {
    sorted.value = key
    comments = comments.sort((a, b) => {
        return key == 'createdAt' ?
            new Date(b.createdAt) - new Date(a.createdAt) :
            b.point - a.point
    })
}
</script>

<style lang="scss">
.product .comments .sort {
    @apply flex gap-4;

    h3 {
        @apply flex items-center gap-2 text-[#333333] ml-9;

        i {
            @apply text-2xl;
        }

        span {
            @apply text-lg font-medium font-iran-sans;
        }
    }

    ul {
        @apply flex;

        button {
            @apply h-10 py-1.5 font-iran-sans font-medium text-lg text-[#B2B2B2] #{!important};

            &[active=true] {
                @apply text-primary-600 #{!important};
            }
        }
    }

}
</style>