<script setup lang="ts">
import {Airline, SharedProps} from "@/Types/types";
import {computed} from "vue";
import {usePage} from "@inertiajs/vue3";

const props = defineProps<{
    airline: Airline | null;
    size?: number | string;
}>();

const page = usePage<SharedProps>().props;
const logoUrl = computed(() => `url('${page.logo_api_url}/airlines/logos/tail/id/${props.airline?.id}')`);
const size = computed(() => props.size ? props.size + 'px' : '30px');
</script>

<template>
<span></span>
</template>

<style scoped>
span{
    width: v-bind(size);
    height: v-bind(size);
    background-image: v-bind(logoUrl);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
</style>
