<template>
    <div class="information">
        <h2>{{ $t('userInformation') }}</h2>
        <div>
            <ul>
                <li v-for="(value, key) in data" :key="key">
                    <label>{{ $t(key) }} : </label>
                    <span>{{ value }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import init from '../../initialize/userProfileInformation'
const { items } = init()

const profile = inject('data')
const data = reactive({});

const temp = {
    true: 'تایید شده', false: 'تایید نشده', '0': 'مرد', '1': 'خانم'
}

items.forEach(key => {
    const value = profile[key];
    data[key] = temp[value] || value
});

</script>

<style lang="scss">
.information {
    @apply w-[21.4rem] lg:w-[49.8rem] lg:h-[34.9rem];
    @apply lg:bg-[#FAFAFA] rounded-[0.6rem] lg:border-2 lg:border-[#E5E5E5];
    @apply flex flex-col gap-6 lg:p-8 lg:pl-2.5;

    h2 {
        @apply max-lg:hidden text-[#333333] text-2xl font-bold font-iran-sans flex items-center gap-3.5;

        &::before {
            @apply content-['_'] h-6 w-1.5 rounded-full mb-1 bg-primary-600;
        }
    }

    div {
        @apply w-full h-full lg:h-[27.1rem] lg:overflow-y-auto;

        &::-webkit-scrollbar {
            @apply w-[0.2rem] lg:w-1.5 bg-transparent;
        }

        &::-webkit-scrollbar-thumb {
            @apply bg-[#E5E5E5];
        }

        &::-webkit-scrollbar-track {
            @apply bg-transparent;
        }

        ul {
            @apply flex flex-col gap-y-3 gap-x-6 pl-4 lg:pl-3 h-max lg:h-[26.3rem] lg:flex-wrap;

            li {
                @apply w-[21.4rem] lg:w-[22.1rem] h-[2.8rem] lg:h-12;
                @apply bg-[#F2F2F2] rounded-lg px-4 flex items-center gap-2 font-vazir;
                @apply last:py-2 last:items-start;

                label {
                    @apply text-[#7F7F7F] text-xs lg:text-base whitespace-nowrap leading-6;
                }

                span {
                    @apply text-[#333333] text-xs lg:text-[1.1em] font-medium leading-6;
                }
            }
        }
    }
}
</style>
