<template>
  <div class="w-64">
    <ul v-if="dueDates.length != 0">
      <li v-for="dueDate in dueDates" :key="dueDate.id">
        <SingleDueDate :due-date="dueDate"></SingleDueDate>
      </li>
    </ul>
    <div v-else>Keine Termine Termine Vorhanden</div>
  </div>
</template>

<script lang="ts" setup>
import SingleDueDate from "@/components/dueDates/DueDateSingle.vue";
import { useCurrentCourseSession } from "@/composables";
import { defineProps } from "vue";

// TODO: MaxCount is not working
const props = defineProps<{
  maxCount: {
    default: 3;
    type: number;
  };
}>();

const courseSession = useCurrentCourseSession();
console.log(props.maxCount);

const dueDates = courseSession.value.duedates.slice(0, props.maxCount);
console.log(courseSession.value.duedates);
</script>
