<template>
    <div class="national-card">
        <h2>{{ $t("nationalCard") }}</h2>
        <p>{{ $t("nationalCardDesc") }}</p>
        <img :src="nationalCard" />
        <label>
            <i :class="tags[confirmToSales].icon"></i>
            <span>{{ tags[confirmToSales].label }}</span>
        </label>
        <div>
            <span>{{ nationalCode }}</span>
            <i class="isax isax-link-21" />
        </div>
    </div>
</template>

<script setup>
const { nationalCard, confirmToSales, nationalCode } = inject('data')

const tags = reactive({
    true: {
        icon: 'isax isax-tick-circle',
        label: 'تاییده شده'
    },
    false: {
        icon: 'isax isax-close-circle',
        label: 'تاییده نشده'
    }
})
</script>

<style lang="scss">
.national-card {
    @apply w-[21.4rem] h-[28.4rem] lg:w-[24.2rem] lg:h-[34.9rem];
    @apply flex flex-col gap-4 p-6 lg:p-8 bg-neutral-50 rounded-[0.6rem] border-neutral-200;
    @apply border lg:border-2;

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

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

    p {
        @apply text-[#7F7F7F] text-xs lg:text-base font-medium font-vazir;
    }



    img {
        @apply w-[18.4rem] h-[11.6rem] lg:w-[20.2rem] lg:h-[12.8rem] bg-[#F2F2F2] rounded-[0.6rem] overflow-hidden relative;

        @apply object-cover object-center;
    }

    label {
        @apply flex items-center gap-2 text-[#7F7F7F];

        span {
            @apply text-xs font-iran-sans;
        }

        i {
            @apply text-xl;
        }
    }

    div {
        @apply h-[2.7rem] lg:h-[3.1rem] flex justify-end items-center gap-2 px-4;
        @apply text-[#333333] bg-[#F2F2F2] rounded-lg shrink-0 mt-auto;

        i {
            @apply text-2xl;
        }

        span {
            @apply font-iran-sans text-xs lg:text-base;
        }

    }
}
</style>
