<template>
  <div class="mb-12 grid grid-cols-icon-card gap-x-4 grid-areas-icon-card">
    <it-icon-calendar class="w-[60px] grid-in-icon" />
    <h2 class="text-large font-bold grid-in-title">Datum</h2>
    <p class="grid-in-value">{{ start }} - {{ end }}</p>
  </div>
  <div class="mb-12 grid grid-cols-icon-card gap-x-4 grid-areas-icon-card">
    <it-icon-location class="w-[60px] grid-in-icon" />
    <h2 class="text-large font-bold grid-in-title">Standort</h2>
    <p class="grid-in-value">{{ location }}</p>
  </div>
  <div class="grid grid-cols-icon-card content-between gap-x-4 grid-areas-icon-card">
    <it-icon-trainer class="w-[60px] grid-in-icon" />
    <h2 class="text-large font-bold grid-in-title">Trainer</h2>
    <p class="grid-in-value">{{ trainer }}</p>
  </div>
</template>

<script setup lang="ts">
import type { CourseSessionAttendanceCourse } from "@/types";
import dayjs from "dayjs";
import LocalizedFormat from "dayjs/plugin/localizedFormat";
import { computed } from "vue";

export interface Props {
  attendanceCourse: CourseSessionAttendanceCourse;
}

const props = defineProps<Props>();

dayjs.extend(LocalizedFormat);
const format = "LLLL";
const start = computed(() => dayjs(props.attendanceCourse.start).format(format));
const end = computed(() => dayjs(props.attendanceCourse.end).format(format));
const location = computed(() => props.attendanceCourse.location);
const trainer = computed(() => props.attendanceCourse.trainer);
</script>
