<script setup lang="ts">
import LangSwitch from './inner/langSwitch.vue'
import ThemeSwitch from './inner/themeSwitch.vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
</script>

<template>
  <header
    class="fixed top-0 left-0 right-0 z-50 bg-(--main-light)/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
    <div class="container px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-14">
        <!-- Logo -->
        <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center">
            <UIcon name="i-heroicons-clock" class="w-5 h-5" />
          </div>
          <span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
        </RouterLink>
        <!-- Right Side Actions -->
        <div class="flex items-center gap-2">
          <!-- Language Switcher -->
          <LangSwitch />
          <!-- Theme Switcher -->
          <ThemeSwitch />
        </div>
      </div>
    </div>
  </header>
</template>
