<style scoped src="./Technology.css"/>

<template>
  <div class="Technology flex-col" :class="[size]">
    <a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
      <img loading="lazy" :src="img" :alt="altText()" :width="size === 'm' ? 30 : 50" :height="size === 'm' ? 30 : 50" :class="[size]"/>
    </a>
    <img v-else loading="lazy" :width="size === 'm' ? 30 : 50" :height="size === 'm' ? 30 : 50" :src="img" :alt="altText()"/>
    <span class="tip">{{name}}</span>
  </div>
</template>

<script setup lang="ts">
type Props = {
  img: string
  name: string
  link?: string
  size?: 'm' | 'l'
}

const {name} = withDefaults(defineProps<Props>(), {
  size: 'm'
})

const altText = () => `Icon für ${name}`
</script>
