<script setup lang="ts">
import CourseSessionsMenu from "@/components/header/CourseSessionsMenu.vue";
import type { UserState } from "@/stores/user";
import type { CourseSession } from "@/types";

const props = defineProps<{
  courseSessions: CourseSession[];
  user: UserState;
  selectedCourseSession?: number;
}>();

const emit = defineEmits(["selectCourseSession", "logout"]);
</script>

<template>
  <div class="text-black">
    <div class="border-b py-4">
      <div class="flex justify-start">
        <div v-if="user.avatar_url">
          <img
            class="inline-block h-20 w-20 rounded-full"
            :src="user.avatar_url"
            alt=""
          />
        </div>
        <div class="ml-6">
          <h3>{{ user.first_name }} {{ user.last_name }}</h3>
          <div class="text-sm text-gray-800">{{ user.email }}</div>
        </div>
      </div>
    </div>

    <div v-if="props.courseSessions.length" class="border-b py-4">
      <CourseSessionsMenu
        :items="courseSessions"
        :selected="selectedCourseSession"
        @select="emit('selectCourseSession', $event)"
      />
    </div>

    <button type="button" class="mt-6 flex items-center" @click="emit('logout')">
      <it-icon-logout class="inline-block" />
      <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
    </button>
  </div>
</template>
