<template>
  <div class="navbar bg-base-300 px-4">
    <div class="navbar-start">
      <div class="text-xl font-bold">{{ title }}</div>
    </div>
    <div class="navbar-end">
      <div class="dropdown dropdown-end">
        <div 
          tabindex="0" 
          role="button" 
          class="btn btn-ghost btn-circle avatar"
        >
          <div class="w-10 rounded-full bg-primary flex items-center justify-center">
            <span class="text-primary-content font-bold text-sm">
              {{ userInitials }}
            </span>
          </div>
        </div>
        <ul 
          tabindex="0" 
          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-64"
        >
          <li>
            <a @click="navigateToProfile">Profile</a>
          </li>
          <li>
            <details>
              <summary>Theme Settings</summary>
              <div class="p-4">
                <ThemeSwitcher />
              </div>
            </details>
          </li>
          <li>
            <a @click="handleLogout">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useNavigation } from '../composables/navigation';
import { useAppStore } from '../stores/app';

const props = defineProps<{
  title: string;
}>();

// Validate title prop
const validateTitle = (title: string): boolean => {
  return typeof title === 'string' && title.length > 0 && title.length <= 50;
};

// Validate props
if (!validateTitle(props.title)) {
  console.warn('AppNavbar: title prop should be a non-empty string with max 50 characters');
}

const appStore = useAppStore();
const { navigateToProfile, handleLogout } = useNavigation();

const userInitials = computed(() => appStore.userInitials);
</script>
