<template>
    <details class="blog-categories" open>
        <summary>
            <h2>{{ $t('categoryOfContent') }}</h2>
            <i class="isax isax-arrow-circle-down"></i>
        </summary>
        <ul>
            <li v-for="(category, i) in blogCategory" :key="i">
                <router-link :to="{ path: '/blog', query: { category: category.link } }">
                    <span>{{ category.name }}</span>
                    <i :class="{ selected: category.link == selectedCate }"></i>
                </router-link>
            </li>
        </ul>
    </details>
</template>

<script setup>
const props = defineProps(['data'])
const { blogCategory, selectedCate } = inject('data') || props.data
</script>

<style lang="scss">
.blog-categories {
    @apply w-[17.1rem] lg:w-[18.3rem] appearance-none select-none shrink-0 rtl max-xl:hidden;
    @apply h-full bg-white m-0 max-h-none ml-auto 2xl:ml-6 #{!important};

    summary {
        @apply w-full h-[3.9rem] lg:h-[5.5rem] flex items-center justify-between bg-[#43E97B] lg:rounded-[0.6rem] p-4 cursor-pointer;

        h2 {
            @apply text-stone-50 text-lg lg:text-xl font-bold font-vazir leading-[2.8rem];
        }

        i {
            @apply text-white text-[1.4em] lg:text-2xl transition-transform;
        }
    }

    &[open] summary i {
        @apply rotate-180;
    }

    ul {
        @apply flex flex-col gap-3 mt-[1.1rem] lg:gap-4 lg:mt-4 px-3 lg:px-0;

        li {
            a {
                @apply w-full h-14 bg-[#F8F8F8] rounded-[0.6rem];
                @apply flex items-center justify-between px-[1.1rem] lg:p-4 hover:bg-stone-100;

                span {
                    @apply text-neutral-400 text-sm lg:text-xl font-medium font-vazir leading-[1.9rem];
                }

                i {
                    @apply w-2.5 h-2.5 lg:w-3 lg:h-3 bg-[#D9D9D9] rounded-full;
                }

                .selected {
                    @apply bg-[#43E97B];
                }
            }
        }
    }
}
</style>