<template>
  <nuxt-link
    :href="href"
    target="_blank"
    class="link"
  >
    <v-img
      :src="img"
      :height="26"
      :alt="alt"
    />
  </nuxt-link>
</template>

<script setup lang="ts">
import type { PropType } from '@vue/runtime-core'

defineProps({
  href: String,
  img: String,
  alt: {
    type: String as PropType<string, null>,
    required: false,
    default: ''
  }
})
</script>

<style scoped lang="scss">
.link {
  width: 20%;
  margin: 0 auto;
  max-width: 140px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  :deep(.v-img) {
    width: 100%;
  }
}

:deep(.v-img__img) {
  display: block !important;
}
</style>