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

const props = defineProps<{
  learningContentType: LearningContentType;
}>();
</script>

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