<script setup lang="ts">
import {ProfileView} from "@/Types/types";

defineProps<{
    activeView: string;
}>()

const emit = defineEmits<{
    'update:activeView': [view: ProfileView]
}>()
</script>

<template>
    <div class="view-toolbar">
        <button
            class="view-btn"
            :class="{ active: activeView === 'map' }"
            @click="emit('update:activeView', 'map')"
        >
            <span class="view-btn-icon mdi mdi-earth"></span>
            <span class="view-btn-label">MAP</span>
        </button>
        <button
            class="view-btn"
            :class="{ active: activeView === 'board' }"
            @click="emit('update:activeView', 'board')"
        >
            <span class="view-btn-icon mdi mdi-table"></span>
            <span class="view-btn-label">DEPARTURE BOARD</span>
        </button>
        <button
            class="view-btn"
            :class="{ active: activeView === 'passes' }"
            @click="emit('update:activeView', 'passes')"
        >
            <span class="view-btn-icon mdi mdi-ticket"></span>
            <span class="view-btn-label">BOARDING PASSES</span>
        </button>
    </div>
</template>

<style scoped>
/* ── View toolbar ── */
.view-toolbar {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,193,7,0.15);
    border-radius: 3px;
    width: fit-content;
    overflow: hidden;
}

.view-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,193,7,0.15);
    color: #556;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.view-btn:last-child {
    border-right: none;
}

.view-btn:hover {
    background: rgba(255,193,7,0.05);
    color: #9aa;
}

.view-btn.active {
    background: rgba(255,193,7,0.08);
    color: #ffc107;
}

.view-btn-icon {
    font-size: 0.8rem;
    opacity: 0.8;
}
</style>
