<script setup lang="ts">
import type { LearningContent } from "@/types";
import { learningContentTypeData } from "@/utils/typeMaps";

const props = defineProps<{
  learningContent: LearningContent;
}>();
</script>

<template>
  <div
    v-if="props.learningContent.content_type !== 'learnpath.LearningContentPlaceholder'"
    class="flex h-min w-min items-center gap-2 rounded-full bg-gray-200 px-2.5 py-0.5"
  >
    <component
      :is="learningContentTypeData(props.learningContent).icon"
      class="h-6 w-6"
    ></component>
    <p class="whitespace-nowrap">
      {{ learningContentTypeData(props.learningContent).title }}
    </p>
  </div>
</template>
