<script lang="ts" setup>
import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
import type { DueDate } from "@/types";
import { computed } from "vue";

const props = defineProps<{
  maxCount: number;
  dueDates: DueDate[];
  showTopBorder: boolean;
  showBottomBorder: boolean;
  showAllDueDatesLink: boolean;
  showCourseSession: boolean;
}>();

const allDueDates = computed(() => {
  return props.dueDates;
});

const dueDatesDisplayed = computed(() => {
  return props.dueDates.slice(0, props.maxCount);
});
</script>

<template>
  <div>
    <ul :class="showBottomBorder ? '' : 'no-border-last'">
      <li
        v-for="dueDate in dueDatesDisplayed"
        :key="dueDate.id"
        class="cy-single-due-date"
        :class="{ 'first:border-t': props.showTopBorder, 'border-b': true }"
      >
        <DueDateSingle
          :due-date="dueDate"
          :show-course-session="props.showCourseSession"
        ></DueDateSingle>
      </li>
    </ul>
    <div v-if="allDueDates.length === 0">{{ $t("dueDates.noDueDatesAvailable") }}</div>
    <div
      v-if="showAllDueDatesLink && allDueDates.length > 0"
      class="flex items-center pt-6"
    >
      <a href="/appointments">{{ $t("dueDates.showAllDueDates") }}</a>
      <it-icon-arrow-right />
    </div>
  </div>
</template>

<style lang="postcss" scoped>
.no-border-last li:last-child {
  border-bottom: none !important;
}
</style>
