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

const page = usePage<SharedProps>().props;

const props = defineProps<{
    alliance: Alliance;
    size?: number | string;
}>();

const logoUrl = computed(() => `url('/img/alliances/${props.alliance.internal_name}.svg')`);
const size = computed(() => props.size ? props.size + 'px' : '30px');
</script>

<template>
            <span :title="alliance.name" class="alliance-logo"></span>
</template>

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