<template>
  <aside class="BlogAuthor">
    <div class="image">
      <img
        loading="lazy"
        width="50"
        height="50"
        :srcset="imageSet"
        :src="initialImage"
        aria-hidden="true"
        :alt="`Profilbild von ${name}`"
      />
    </div>
    <div class="meta">
      <span class="name">{{ name }}</span>
      <span class="date">{{ dateFormatted }}</span>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { getImageSet, getInitialImage } from '../../utils/image'

type Props = {
  name: string
  date: string
  img?: string
}

const { name, date, img } = defineProps<Props>()

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

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

const imageSet = computed(() => {
  if (img) return img
  return getImageSet('/img/blog/authors/', name).join(', ')
})

const initialImage = computed(() => {
  if (img) return img
  return getInitialImage('/img/blog/authors/', name)
})
</script>