<script setup lang="ts">
import { computed } from "vue";

interface Props {
  datetime: string;
}

const props = defineProps<Props>();

const dateLabels = computed<Record<string, string>>(() => {
  const date = new Date(props.datetime);
  const locale = "de-DE";

  const dates = {
    year: date.toLocaleDateString(locale, { year: "numeric" }),
    month: date.toLocaleDateString(locale, { month: "short" }),
    day: date.toLocaleDateString(locale, { day: "numeric" }),
  };

  return dates;
});
</script>

<template>
  <li class="timeline-item">
    <time class="timeline-item__datetime" :datetime="datetime">
      <div class="timeline-item__label">{{ dateLabels.day }}</div>
      <div class="timeline-item__label">{{ dateLabels.month }}</div>
      <div class="timeline-item__label">{{ dateLabels.year }}</div>
    </time>
    <section class="timeline-item__content">
      <h1 class="timeline-item__headline">
        <slot name="headline"></slot>
      </h1>

      <div class="timeline-item__text">
        <slot name="content"></slot>
      </div>
    </section>
  </li>
</template>

<style lang="scss">
.timeline {
  &-item {
    display: flex;
    flex-flow: row nowrap;

    margin: var(--timeline-item-margin);

    position: relative;

    &:not(:last-child):before {
      content: "";
      position: absolute;
      top: var(--timeline-stroke-position-top);
      left: var(--timeline-stroke-position-horizontal);
      height: var(--timeline-stroke-length);
      border-left: var(--timeline-stroke-thickness) solid
        var(--timeline-stroke-color);
    }

    @media (min-width: 64em) {
      &:nth-child(odd) {
        margin: var(--timeline-item-margin-odd);
      }

      &:nth-child(even) {
        margin: var(--timeline-item-margin-even);

        &:before {
          left: auto;
          right: var(--timeline-stroke-position-horizontal);
        }

        .timeline-item__datetime {
          order: 1;
        }

        .timeline-item__content {
          text-align: right;
          margin: 0 1rem 0 0;
        }
      }
    }

    &__datetime {
      font-size: var(--timeline-circle-font-size);
      text-align: center;
      line-height: 1.1;

      background-color: var(--timeline-circle-background);

      flex: 0 0 var(--timeline-circle-size);
      width: var(--timeline-circle-size);
      height: var(--timeline-circle-size);

      margin: 0;
      border: var(--timeline-stroke-thickness) solid
        var(--timeline-stroke-color);
      border-radius: 100%;
      padding: var(--timeline-circle-padding);
    }

    &__label {
    }

    &__content {
      flex: 1 0 0;
      margin: 0 0 0 1rem;
    }

    &__headline {
      font-size: calc(var(--timeline-circle-size) / 2);
      line-height: calc(var(--timeline-circle-size) / 2);
      margin: calc(var(--timeline-circle-size) / 4) 0;
    }

    &__text {
      line-height: 1.5;
    }
  }
}
</style>
