<template>
  <toolbar-component pageTitle="Member Profile" />
  <q-page padding>
    <q-list bordered>
      <q-separator />
      <q-item>
        <q-item-section avatar>
          <q-avatar icon="person" />
        </q-item-section>
        <q-item-section>
          {{ authStore.currentUser?.name }}
          <q-item-label caption>Name</q-item-label>
        </q-item-section>
      </q-item>
      <q-separator />
      <q-item>
        <q-item-section>
          <q-item-label overline>Certifications</q-item-label>
          <div>
            <q-chip square icon="verified" color="green" text-color="white"
              >J/27</q-chip
            >
            <q-chip square icon="verified" color="blue" text-color="white"
              >Capri25</q-chip
            >
            <q-chip square icon="verified" color="grey-9" text-color="white"
              >Night</q-chip
            >
          </div>
        </q-item-section>
      </q-item>
    </q-list>
  </q-page>
</template>

<script setup lang="ts">
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
import { useAuthStore } from 'src/stores/auth';

const authStore = useAuthStore();
</script>
