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

const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);

const greetedUser = computed(() => {
  const userProfile = mainStoreRef.readUserProfile;
  if (userProfile.value) {
    if (userProfile.value!.full_name){
      return userProfile.value!.full_name;
    } else {
      return userProfile.value.email;
    }
  }
});
</script>

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <div class="headline primary--text">Dashboard</div>
      </v-card-title>
      <v-card-text>
        <div class="headline font-weight-light ma-5">Welcome {{ greetedUser }}</div>
      </v-card-text>
      <v-card-actions>
        <v-btn to="/main/profile/view">View Profile</v-btn>
        <v-btn to="/main/profile/edit">Edit Profile</v-btn>
        <v-btn to="/main/profile/password">Change Password</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<style lang="scss" scoped>
.v-toolbar__content {
  background-image: linear-gradient(-225deg, rgb(234, 84, 19) 35%, rgb(178, 69, 146) 100%);
}
</style>