<script setup lang="ts">
import * as log from "loglevel";

log.debug("LeariningContentContainer.vue setup");

defineProps<{
  exitText: string;
  title: string;
  nextButtonText: string;
  showBackButton?: boolean;
}>();

defineEmits(["back", "next", "exit"]);
</script>

<template>
  <div class="overflow-y-scroll h-content">
    <nav
      class="px-4 lg:px-8 py-4 flex justify-between items-center border-b bg-white absolute w-full"
    >
      <button
        type="button"
        class="btn-text inline-flex items-center px-3 py-2"
        data-cy="close-learning-content"
        @click="$emit('exit')"
      >
        <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
        <span class="hidden lg:inline">{{ exitText }}</span>
      </button>

      <h1 class="text-large hidden lg:block" data-cy="ln-title">
        {{ title }}
      </h1>
      <div>
        <button
          v-if="showBackButton"
          type="button"
          class="btn-secondary mr-4"
          data-cy="cancel-and-back"
          @click="$emit('back')"
        >
          {{ $t("general.backCapitalized") }}
        </button>
        <button
          type="button"
          class="btn-blue"
          data-cy="complete-and-continue"
          @click="$emit('next')"
        >
          {{ nextButtonText }}
        </button>
      </div>
    </nav>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
$footer-height: 57px;

.h-content {
  height: calc(100vh - $footer-height);
}
</style>
