<template>
  <aside class="BlogAuthor">
    <div class="image">
      <img :src="image" :alt="`Bild von ${name}`" />
    </div>
    <div class="meta">
      <span class="name">{{ name }}</span>
      <span class="date">{{ dateFormatted }}</span>
    </div>
  </aside>
</template>

<script setup lang="ts">
type Props = {
  name : string
  image : string
  date : string
}

const { date } = defineProps<Props>()

const formatter = new Intl.DateTimeFormat('de-DE', {
  year: 'numeric',
  month: 'long',
  day: '2-digit',
})

const dateFormatted = computed(() => formatter.format(new Date(date)))
</script>