<template>
  <v-app-bar color="#191c2a" style="background: #0d1538">
    <v-container :class="width < 1440 ? 'ms-3' : 'mx-auto'" fluid style="max-width: 1440px">
      <v-row>
        <v-app-bar-title style="align-self: center">
          <span style="font-size: 20px">
            ALHP Status
            <a class="ms-2 gitea-link" href="https://somegit.dev/ALHP/ALHP.GO" target="_blank">
              <i class="fa fa-gitea"></i>
            </a>
          </span>
        </v-app-bar-title>

        <build-stats v-if="!mobile" />
      </v-row>
    </v-container>
  </v-app-bar>
</template>

<script lang="ts" setup>
import BuildStats from '@/components/BuildStats.vue'
import { useDisplay } from 'vuetify'

const { mobile, width } = useDisplay()
</script>

<style scoped>
.gitea-link {
  color: white;
  font-size: 25px;
  text-decoration: none; /* Optional: To prevent underlining */
  transition: color 0.2s; /* Smooth color transition */
}

.gitea-link:hover {
  color: #609926;
}
</style>
