<script setup lang="ts">
import { computed } from 'vue'
import FormattedNumber from "@/Components/FormattedNumber.vue";
import {DistanceUnit} from "@/Types/types";

const props = withDefaults(defineProps<{
    value: number
    unit?: DistanceUnit
    showUnits?: boolean
    includeSpace?: boolean
}>(), {
    showUnits: true,
    unit: 'km',
    includeSpace: false,
})

const CONVERSIONS: Record<string, number> = {
    km: 1,
    mi: 0.621371,
    nm: 0.539957,
}

const LABELS: Record<string, string> = {
    km: 'km',
    mi: 'mi',
    nm: 'nm',
}

const unit = computed(() => props.unit ?? 'km')

const converted = computed(() => props.value * CONVERSIONS[unit.value])

</script>

<template>
    <FormattedNumber :value="converted" />{{includeSpace ? ' ' : ''}}{{ showUnits ? LABELS[unit] : '' }}
</template>

<style scoped>

</style>
