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

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

const {
  name,
  size = 'm',
  width = 50,
} = defineProps<Props>()

const sizes = {
  s: 15,
  m: 30,
  l: 50,
}

const altText = () => `Icon für ${name}`
const getPixelForSize = () => sizes[size]
const getWidth = () => width / 50 * getPixelForSize()
</script>
