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

type LogoVariant = 'color' | 'mono'

const props = withDefaults(defineProps<{
    variant?: LogoVariant
    height?: string
    width?: string
}>(), {
    variant: 'color',
    height: '90%',
    width: 'auto',
})

const sources: Record<LogoVariant, string> = {
    color: '/img/logos/header_logo_color.svg',
    mono: '/img/logos/header_logo_mono.svg',
}

const src = computed(() => sources[props.variant])
</script>

<template>
    <img
        :src="src"
        alt="FlightsGoneBy"
        class="logo"
        :style="{ height: props.height }"
    />
</template>

<style scoped>
.logo {
    width: auto;
    display: block;
}
</style>
