<script setup lang="ts">
// Basic layout for a learning content that only has a single step
import LearningContentFooter from "@/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue";
import type { LearningContent } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";
import { computed } from "vue";

export interface Props {
  title?: string;
  icon?: string;
  subTitle?: string;
  learningContent?: LearningContent;
}

const props = withDefaults(defineProps<Props>(), {
  title: "",
  icon: "",
  subTitle: "",
  learningContent: undefined,
});

const subTitle = computed(() => {
  if (props.subTitle) {
    return props.subTitle;
  }
  if (props.learningContent) {
    return learningContentTypeData(props.learningContent).title;
  }
  return "";
});

const icon = computed(() => {
  if (props.icon) {
    return props.icon;
  }
  if (props.learningContent) {
    return learningContentTypeData(props.learningContent).icon;
  }
  return "";
});
</script>

<template>
  <div class="container-medium">
    <div
      v-if="
        props.learningContent?.content_type !== 'learnpath.LearningContentPlaceholder'
      "
      class="flex h-min w-full items-center gap-2 pb-8"
    >
      <component :is="icon" v-if="icon" class="h-6 w-6 text-gray-900"></component>
      <p v-if="subTitle" class="whitespace-nowrap text-gray-900" data-cy="lc-subtitle">
        {{ subTitle }}
      </p>
    </div>

    <h2 v-if="props.title" data-cy="lc-title">{{ props.title }}</h2>
  </div>
  <slot></slot>
  <LearningContentFooter
    :show-next-button="false"
    :show-previous-button="false"
    :show-exit-button="true"
    :show-start-button="false"
    :closing-button-variant="'close'"
  ></LearningContentFooter>
</template>
