<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<template>
  <nav class="bg-gray-800 text-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo / Home Link -->
        <div class="flex items-center cursor-pointer" @click="router.push('/')">
          <span class="text-xl font-bold tracking-tight">Web Utils 2026</span>
        </div>
        
        <!-- Navigation Links -->
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <router-link 
              to="/" 
              class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700 transition"
              active-class="bg-gray-900 text-white"
            >
              Dashboard
            </router-link>
            <!-- Add more global links here if needed -->
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>
