<script setup lang="ts">
import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
import type { LearningContentMediaLibrary } from "@/types";
import log from "loglevel";

const props = defineProps<{
  content: LearningContentMediaLibrary;
}>();

log.debug("LearningContentMediaLibraryBlock.vue created");
</script>

<template>
  <LearningContentSimpleLayout
    :title="props.content.title"
    :learning-content="props.content"
  >
    <div class="container-medium">
      <!-- eslint-disable vue/no-v-html -->
      <p class="text-large my-4 lg:my-8" v-html="props.content.description"></p>
      <a
        :href="`${props.content.content_url}`"
        target="_blank"
        data-cy="media-library-link"
        class="btn-primary inline-flex items-center"
      >
        Handlungsfeld anzeigen
        <it-icon-external-link class="ml-2 h-5 w-5"></it-icon-external-link>
      </a>
    </div>
  </LearningContentSimpleLayout>
</template>
