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

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

const emit = defineEmits(["selectCourseSession", "logout", "close"]);

const router = useRouter();

async function navigate(routeName: string) {
  await router.push({ name: routeName });
  emit("close");
}
</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-24 w-24 rounded-full"
            :src="user.avatar_url"
            alt=""
          />
        </div>
        <div class="ml-6">
          <h3>{{ user.first_name }} {{ user.last_name }}</h3>
          <div class="mb-3 text-sm text-gray-800">{{ user.email }}</div>
          <button class="underline" @click="navigate('personalProfile')">
            {{ $t("a.Profil anzeigen") }}
          </button>
        </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>
