<script setup lang="ts">
    defineProps<{
        label: string
        value: string | null
        countryCode?: string
    }>()
</script>

<template>
    <div class="tooltip-row">
        <span class="tooltip-label">{{label}}</span>
        <span v-if="!countryCode" class="tooltip-value">{{value}}</span>
        <span v-if="countryCode" class="tooltip-value">
            <span class="fi" :class="`fi-${countryCode.toLowerCase()}`" /> {{value}}
        </span>
    </div>
</template>

<style scoped>
    .tooltip-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .tooltip-label {
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.6rem;
        letter-spacing: 0.15em;
        color: var(--muted, #445566);
        flex-shrink: 0;
        text-transform: uppercase;
    }

    .tooltip-value {
        font-size: 0.78rem;
        color: var(--text, #c8cdd8);
        text-align: right;
    }

    .fi{
        font-size: 1rem;
        padding: 0.25rem;
    }
</style>
