<template>
    <div class="logout">
        <h2>
            <i class="isax isax-logout" />
            <span>{{ $t("logoutUserAccount") }}</span>
        </h2>
        <p>{{ $t("logoutUserAccountQuest") }}</p>
        <div>
            <Button v-bind="btns.logout.props" @click="logout()" />
            <Button v-bind="btns.cancel.props" @click="dialog.close()" />
        </div>
    </div>
</template>

<script setup>
import init from '../../../initialize/logout.js'
const { btns } = init();

const dialog = inject('dialogRef');
const router = useRouter()

const logout = () => {
    const token = useCookie('token')
    token.value = null
    router.push('/')
    dialog.value.close()
}

</script>

<style lang="scss">
.logout {
    @apply bg-white w-full lg:w-[32.1rem] h-64 flex flex-col items-center gap-2 rounded-[0.6rem] max-lg:rounded-b-none p-[2.4rem];

    h2 {
        @apply flex items-center gap-4 text-[#333];

        i {
            @apply text-[2em];
        }

        span {
            @apply text-xl font-bold font-vazir leading-[2.8rem];
        }
    }

    p {
        @apply text-[#B2B2B2] text-base font-medium font-vazir leading-[1.7rem];
    }

    div {
        @apply flex items-center gap-4 mt-auto;

        button {
            @apply w-36 lg:w-[10.4rem] h-11 border-[#AD3434] #{!important};

            .p-button-label {
                @apply font-medium font-vazir leading-tight #{!important};
            }
        }

        button:first-child {
            @apply bg-[#AD3434];
        }

        button:last-child .p-button-label {
            @apply text-[#AD3434];
        }
    }
}
</style>
