<template>
    <div class="summary">
        <h1>{{ title }}</h1>
        <h2>
            <span>{{ titleEN }}</span>
            <hr />
        </h2>
        <div>
            <i class="isax isax-star-15" />
            <span>{{ stars }}</span>
            <a href="#comments">
                {{ comments.length }} {{ $t('viewpoint') }}
            </a>
        </div>
        <h3>{{ $t('keyFeatures') }}</h3>
        <ul>
            <li v-for="(value, key) in shortDesc" :key="key">
                <label>{{ key }}:</label>
                <span>{{ value }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { title, titleEN, stars, comments, shortDesc } = inject('data')
</script>

<style lang="scss">
.product>.wrapper>.summary {
    @apply w-full lg:w-auto lg:min-w-[17.5rem] grow px-6 lg:px-0 lg:max-w-[47.9rem] lg:h-[29.9rem] flex flex-col mt-9 lg:mt-0 lg:mr-6 max-lg:order-2;

    h1 {
        @apply text-[#191919] font-bold font-vazir text-base lg:text-2xl;
    }

    h2 {
        @apply flex items-center gap-3 mt-3 lg:mt-4 text-sm lg:text-base;

        span {
            @apply text-[#B2B2B2] font-vazir;
        }

        hr {
            @apply hidden lg:block h-px lg:h-0.5 grow bg-[#E5E5E5];
        }
    }

    &>div {
        @apply flex items-center gap-1 font-vazir mt-1.5 lg:mt-2.5;

        i {
            @apply text-xl text-[#FFB628];
        }

        span {
            @apply flex items-center gap-4 ml-4 text-[#191919] text-base lg:text-xl;

            &::after {
                @apply content-['_'] w-1.5 h-1.5 bg-neutral-200 rounded-full;
            }
        }

        a {
            @apply text-primary-500 text-base lg:text-xl;
        }
    }

    h3 {
        @apply text-zinc-900 font-bold font-vazir mt-12 text-base lg:text-2xl;
    }

    ul {
        @apply flex flex-col gap-[1.1rem] lg:gap-7 mt-6 lg:mt-8;

        li {
            @apply flex items-center gap-3 font-vazir;

            label {
                @apply flex items-center gap-3 text-[#7F7F7F] text-xs lg:text-lg font-medium;

                &::before {
                    @apply content-['_'] w-2 h-2 bg-[#7F7F7F] rounded-full;
                }
            }

            span {
                @apply text-[#333] text-xs lg:text-lg;
            }
        }
    }
}
</style>
