<template>
  <figure class="cpAirlineLogo" :style="dynamicStyle" :title="dynamicTitle" />
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  iataCode?: string | null
  size?: number | string
}

const props = withDefaults(defineProps<Props>(), {
  iataCode: '1L',
  size: 32,
})

const airlineLogoUrl = computed(() => `https://images.kiwi.com/airlines/64/${props.iataCode}.png?default=airline.png`)

const dynamicStyle = computed(() => {
  const size = props.size === '100%' ? props.size : `${props.size}px`

  return {
    backgroundImage: `url('${airlineLogoUrl.value}')`,
    width: size,
    height: size,
  }
})

const dynamicTitle = computed(() => `${props.iataCode} airline logo`)
</script>

<style lang="scss">
.cpAirlineLogo {
  overflow: hidden;
  border-radius: var(--cp-radius-sm);
  background-repeat: no-repeat;
  background-size: contain;
}
</style>
