<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 { LearningContentType } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";

export interface Props {
  title: string;
  learningContentType: LearningContentType;
}

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

const type = learningContentTypeData(props.learningContentType);
</script>

<template>
  <div class="container-medium">
    <div
      v-if="props.learningContentType !== 'placeholder'"
      class="flex h-min w-full items-center gap-2 pb-8"
    >
      <component :is="type.icon" class="h-6 w-6 text-gray-900"></component>
      <p class="whitespace-nowrap text-gray-900">
        {{ type.title }}
      </p>
    </div>

    <h2 v-if="props.title" data-cy="ln-title">{{ props.title }}</h2>
  </div>
  <slot></slot>
  <LearningContentFooter></LearningContentFooter>
</template>
