<script setup lang="ts">
import { useMentorCockpit } from "@/services/mentorCockpit";
import { useCurrentCourseSession } from "@/composables";

const courseSession = useCurrentCourseSession();
const { summary } = useMentorCockpit(courseSession.value.id);
</script>

<template>
  <div v-if="summary" class="bg-white px-4 py-2">
    <div
      v-for="participant in summary.participants"
      :key="participant.id"
      class="flex flex-col items-start justify-between gap-4 border-b py-2 last:border-b-0 md:flex-row md:items-center md:gap-16"
    >
      <div class="flex items-center space-x-2">
        <img
          :alt="participant.last_name"
          class="h-11 w-11 rounded-full"
          :src="participant.avatar_url || '/static/avatars/myvbv-default-avatar.png'"
        />
        <div>
          <div class="text-bold">
            {{ participant.first_name }}
            {{ participant.last_name }}
          </div>
          {{ participant.email }}
        </div>
      </div>
      <router-link
        :to="{ name: 'cockpitUserProfile', params: { userId: participant.id } }"
        class="underline"
      >
        {{ $t("cockpit.profileLink") }}
      </router-link>
    </div>
  </div>
</template>
