<script setup lang="ts">

import {Link} from "@inertiajs/vue3";
import { usePage } from '@inertiajs/vue3'
import type { SharedProps } from '@/Types/types'

const props = usePage<SharedProps>().props

</script>

<template>
    <header class="glass">
        <h1>FlightsGoneBy</h1>
        <nav>
            <Link v-if="!props.auth.user" :href="route('login')">Log In</Link>
            <Link v-if="!props.auth.user" :href="route('register')">Register</Link>
            <Link v-if="props.auth.user">Welcome {{props.auth.user.name}}</Link>
        </nav>
    </header>
</template>

<style scoped>
header {
    display:flex;
    align-content: center;
    justify-content: center;
    flex: 0 0 5dvh;
    min-height: 40px; /* prevents it getting too tiny */
    align-items: center;
    padding: 0 1rem;
}

header h1 {
    flex-basis: 25%;
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--accent);
    cursor: pointer;
}

header nav{
    flex-basis: 75%;
    display: flex;
    align-content: center;
    justify-content: flex-end;
    padding: 0 1em;
    gap: 1rem;
}

header nav a {
    height: 100%;
}
</style>
