<template>
  <article class="Person flex-col">
    <img
        loading="lazy"
        width="150"
        height="150"
        :srcset="[getImage('1x', true), getImage('2x', true), getImage('3x', true)].join(', ')"
        :src="getImage('1x', false)"
        :alt="`Bild von ${name}`"
    />
    <h3>{{name}}</h3>
    <p>
      <span v-for="tag in tags">{{tag}}</span>
    </p>
    <p class="flavour">{{flavour}}</p>
    <Button :href="link" class="button" target="_blank" rel="noreferrer noopener" label="Zur Homepage" :aria-label="`Externer Link zur Homepage von ${name}`" />
  </article>
</template>

<script setup lang="ts">
type Props = {
  img: string
  name: string
  tags: string[]
  flavour: string
  link: string
}

const { img } = defineProps<Props>()

const getImage = (size : '1x' | '2x' | '3x', set : boolean) => `/img/network/${img}@${size}.webp${set ? ` ${size}` : ''}`
</script>
