//! Header component with navigation and theme toggle

use crate::state::AppState;
use leptos::prelude::*;

/// Header component with navigation and theme switcher
///
/// Displays the application title, navigation links, and a theme toggle button.
/// Uses the AppState context for theme management.
#[component]
pub fn Header() -> impl IntoView {
    let app_state = use_context::<AppState>().expect("AppState context missing");

    let toggle_theme = move |_| {
        app_state.toggle_theme();
    };

    let theme_icon = move || {
        if app_state.theme.get().as_str() == "dark" {
            "☀️"
        } else {
            "🌙"
        }
    };

    view! {
        <header class="bg-white dark:bg-gray-800 shadow-md transition-colors duration-200">
            <nav class="dash-container py-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-8">
                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                            <a href="/" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                                "Syntaxis"
                            </a>
                        </h1>
                        <div class="flex gap-4">
                            <a
                                href="/"
                                class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                            >
                                "Dashboard"
                            </a>
                        </div>
                    </div>

                    <button
                        on:click=toggle_theme
                        class="px-3 py-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors text-xl"
                        aria-label="Toggle theme"
                    >
                        {theme_icon}
                    </button>
                </div>
            </nav>
        </header>
    }
}
