<template>
  <component class="o-pictogram" :is="$attrs.href ? 'a' : 'div'" :href="$attrs.href">
    <img class="o-pictogram__image" :src="imageSrc" :alt="altText" :width="imageWidth" :height="imageWidth" />

    <div class="o-pictogram__text" :class="{ 'o-pictogram__text--is-link': $attrs.href !== undefined }">
      <span v-if="text" v-html="text"></span>
    </div>
  </component>
</template>

<script setup lang="ts">
defineProps<{
  imageWidth: number;
  imageSrc: string;
  altText: string;
  text?: string;
  modifiers?: never;
}>();

</script>
