<template>
    <section class="flex flex-col gap-6 w-96">
        <div class="flex flex-col gap-2 items-center self-center">
            <Avatar :image="user.avatarMedia" shape="circle" class="w-24 h-24" />
            <h2 class="text-xl">{{ user.name }} {{ user.lastName }}</h2>
            <!-- <Tag :value="$t(user.accountType.toLowerCase())" severity="warning" /> -->
        </div>
        <ul class="flex flex-col gap-5">
            <li class="flex items-center justify-between">
                <strong>{{ $t('phoneNumber') }}</strong>
                <div class="flex items-center gap-2 w-max">
                    <!-- <i v-if="user.confirmNumber" class="pi pi-verified text-green-600"></i> -->
                    <span>{{ user.phone }}</span>
                </div>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('id') }}</strong>
                <div class="flex items-center gap-2 w-max">
                    <!-- <i v-if="user.confirmEmail" class="pi pi-verified text-green-600"></i> -->
                    <span>{{ user.id }}</span>
                </div>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('status') }}</strong>
                <span>{{ user.statusText }}</span>
            </li>
       
        </ul>
    </section>
</template>

<script setup>
import { jDate } from '@/utils/jDate';

import { inject, reactive } from 'vue';

const dialog = inject('dialogRef')

const user = reactive(Object.assign({}, dialog.value.data.user))

const confirmToSales = (value) => {
    dialog.value.data.confirm(user, value)
}
</script>

<style lang="scss" scoped></style>