<template>
  <article class="Person flex-col">
    <img loading="lazy" width="150" height="150" :src="img" :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
}

defineProps<Props>()
</script>
