<template>
    <section class="compare-specs">
        <h2>{{ $t('specifications') }}</h2>
        <ul>
            <li v-for="(items, title) in sortedSpecs" :key="title">
                <CompareSpecItem :data="{ items, title }" />
            </li>
        </ul>
    </section>
</template>

<script setup>
const { sortedSpecs } = inject('data')
</script>

<style lang="scss">
.compare-specs {
    @apply mt-[1.9rem] container lg:w-[107.6rem] flex flex-col gap-8 mx-auto mb-[5.6rem];

    &>h2 {
        @apply text-zinc-800 text-sm lg:text-base font-medium font-vazir
    }

    &>ul {
        @apply flex flex-col gap-6;

        &>li {
            @apply h-[5.1rem] lg:h-[5.1rem] border-b border-neutral-200;
        }
    }
}
</style>