<template>
  <div class="container">
    <div class="item-bloc">
      <div class="item-row">
        <h2 class="badge-title">
          <span class="title_label"></span>
          <span class="title_action">
            <span>
              {{ trans(EVALUATION) }}:
              <span class="badge bg-light text-dark">
                {{ eval?.evaluation?.title.fr }}
              </span>
            </span>

            <ul class="small_in_title columns mt-1">
              <li>
                <span class="item-key">
                  {{ trans(ACCOMPANYING_COURSE_WORK_START_DATE) }}
                  :
                </span>
                <b>{{ formatDate(eval.startDate) }}</b>
              </li>

              <li v-if="eval.endDate">
                <span class="item-key">
                  {{ trans(ACCOMPANYING_COURSE_WORK_END_DATE) }}
                  :
                </span>
                <b>{{ formatDate(eval.endDate) }}</b>
              </li>
            </ul>
          </span>
        </h2>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ACCOMPANYING_COURSE_WORK_END_DATE,
  ACCOMPANYING_COURSE_WORK_START_DATE,
  EVALUATION,
  trans,
} from "translator";
import { ISOToDate } from "ChillMainAssets/chill/js/date";
import { DateTime } from "ChillMainAssets/types";
import { AccompanyingPeriodWorkEvaluation } from "../../../types";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{ eval: AccompanyingPeriodWorkEvaluation }>();
const formatDate = (dateObject: DateTime) => {
  if (dateObject) {
    const parsedDate = ISOToDate(dateObject.datetime);
    if (parsedDate) {
      return new Intl.DateTimeFormat("default", {
        dateStyle: "short",
      }).format(parsedDate);
    } else {
      return "";
    }
  }
};
</script>
