<script setup lang="ts">
import { RouterLink } from "vue-router";
</script>

<template>
  <v-app-bar fixed app>
    <v-container class="d-flex align-center pa-0">
      <div class="d-flex align-center">
        <RouterLink v-slot="{ isActive }" class="mx-2 text-decoration-none" to="/" data-role="homeNavigation">
          <v-btn :variant="isActive ? 'elevated' : 'outlined'" color="primary" size="large" prepend-icon="mdi-home-outline">
            Home
          </v-btn>
        </RouterLink>
        <RouterLink v-slot="{ isActive }" class="mx-2 text-decoration-none" to="/about" data-role="aboutNavigation">
          <v-btn
            :variant="isActive ? 'elevated' : 'outlined'"
            color="primary"
            size="large"
            prepend-icon="mdi-chat-question-outline"
          >
            About
          </v-btn>
        </RouterLink>
        <RouterLink v-slot="{ isActive }" class="mx-2 text-decoration-none" to="/settings" data-role="settingsNavigation">
          <v-btn :variant="isActive ? 'elevated' : 'outlined'" color="primary" size="large" prepend-icon="mdi-cog-outline">
            Settings
          </v-btn>
        </RouterLink>
      </div>
    </v-container>
  </v-app-bar>
</template>
