<script setup lang="ts">
import { useTranslation } from "i18next-vue";
import { useRouteLookups } from "@/utils/route";
import { useCurrentCourseSession } from "@/composables";
import { getCompetenceNaviUrl, getLearningPathUrl } from "@/utils/utils";
import { useCockpitStore } from "@/stores/cockpit";

const { inCompetenceProfile, inLearningPath } = useRouteLookups();
const courseSession = useCurrentCourseSession();
const cockpit = useCockpitStore();

const { t } = useTranslation();
</script>

<template>
  <div data-cy="course-preview-bar">
    <nav class="bg-yellow-500">
      <div class="mx-auto px-4 lg:px-8">
        <div
          class="relative flex h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
        >
          <span class="flex items-center px-1 pt-1 font-bold text-black">
            {{ t("a.VorschauTeilnehmer") }} ({{ courseSession.title }})
          </span>

          <div class="flex space-x-8">
            <router-link
              data-cy="preview-learn-path-link"
              :to="getLearningPathUrl(courseSession.course.slug)"
              class="preview-nav-item"
              :class="{ 'preview-nav-item--active': inLearningPath() }"
            >
              {{ t("general.learningPath") }}
            </router-link>

            <router-link
              v-if="cockpit.hasExpertCockpitType"
              data-cy="preview-competence-profile-link"
              :to="getCompetenceNaviUrl(courseSession.course.slug)"
              class="preview-nav-item"
              :class="{ 'preview-nav-item--active': inCompetenceProfile() }"
            >
              {{ t("competences.title") }}
            </router-link>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<style lang="postcss" scoped>
.preview-nav-item {
  @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-black hover:text-gray-900 focus:text-black;
}

.preview-nav-item--active {
  @apply border-black;
}
</style>
