<script setup lang="ts">

defineProps(['learningSequence'])

</script>

<template>
  <div class="mb-8 learning-sequence">
    <div class="flex items-center gap-4 mb-2">
      <component :is="learningSequence.icon" />
      <h3 class="text-xl">
        {{ learningSequence.title }}
      </h3>
      <div>{{ learningSequence.minutes }} Minuten</div>
    </div>

    <div class="bg-white px-4 border border-gray-500 border-l-4 border-l-sky-500">
      <div
        v-for="learningPackage in learningSequence.learningPackages"
        class="py-3"
      >
        <div class="pb-3 flex gap-4" v-if="learningPackage.title">
          <div class="font-bold">{{ learningPackage.title }}</div>
          <div>{{ learningPackage.minutes }} Minuten</div>
        </div>

        <div
          v-for="learningUnit in learningPackage.learningUnits"
          class="flex items-center gap-4 pb-3"
        >
          <it-icon-smiley-neutral v-if="learningUnit.contents[0].type === 'self_evaluation'"/>
          <it-icon-checkbox-unchecked v-else/>
          <div>{{ learningUnit.contents[0].type }}: {{ learningUnit.title }}</div>
        </div>

        <hr class="-mx-4 text-gray-500">

      </div>
    </div>
  </div>

</template>

<style scoped>

</style>
