<script setup lang="ts">
import { useMainStore } from "@/stores/main";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);
const userProfile = mainStoreRef.readUserProfile;
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <h3 class="card-title">{{ t("userProfile") }}</h3>
      </v-card-title>
      <v-card-text class="my-3">
          <h4 class="">
            {{ t("userName") }}
          </h4>
          <span v-if="userProfile && userProfile.full_name">
            {{ userProfile.full_name }}
          </span>
          <div v-else>-</div>

          <h4 class="mt-3">
            {{ t("emailAddress") }}
          </h4>
          <span v-if="userProfile && userProfile.email">
            {{ userProfile.email }}
          </span>
          <div v-else>-</div>
      </v-card-text>
      <v-card-actions>
        <v-btn to="/main/profile/edit" variant="outlined" color="primary">{{ t("edit") }}</v-btn>
        <v-btn to="/main/profile/password"  variant="flat"
      color="primary" class="ms-3">{{ t("changePassword") }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>
