<script setup>
import { useAuthStore} from '@/stores/authStore.js'
import { onMounted, ref } from 'vue'

const store = useAuthStore()

const userData = ref(null)

onMounted(() => {
  store.userInfo().then(data => {
    userData.value = data
  })
})

</script>

<template>
  <n-list hoverable clickable>
    <n-list-item>
      <n-thing title="Email" content-style="margin-top: 10px;">
        {{ userData?.email || "---" }}
      </n-thing>
    </n-list-item>

    <n-list-item>
      <n-thing title="Username" content-style="margin-top: 10px;">
        {{ userData?.username || "---" }}
      </n-thing>
    </n-list-item>

    <n-list-item>
      <n-thing title="Created At" content-style="margin-top: 10px;">
        {{ userData?.created_at || "---" }}
      </n-thing>
    </n-list-item>

  </n-list>
</template>

<style scoped>

</style>
