<template>
  <div class="d-flex align-end justify-center mr-1 mr-md-2">
    <span class="d-flex text-h4 text-md-h3">{{ day }}</span>
    <span class="d-flex text-h5 text-md-h4 blue-grey--text text--darken-1">
      {{ month }}
    </span>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { DateTime } from "luxon";

@Component
export default class EventDate extends Vue {
  @Prop()
  private readonly date!: DateTime;

  private get day(): string {
    return this.date.toFormat("dd.");
  }

  private get month(): string {
    return this.date.toFormat("MM.");
  }
}
</script>

<style lang="scss" scoped>
@import "~vuetify/src/styles/settings/_variables";

div {
  min-width: 95px;

  @media #{map-get($display-breakpoints, "md-and-up")} {
    min-width: 130px;
  }
}
</style>