use leptos::prelude::*;

use crate::store::{use_app_state, use_theme};

#[component]
pub fn Header() -> impl IntoView {
    let app_state = use_app_state();
    let (theme, _set_theme) = use_theme();

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

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

    view! {
        <header class="navbar bg-base-100 shadow-sm border-b border-base-300 px-6">
            // Left side
            <div class="navbar-start">
                <button class="btn btn-ghost btn-square lg:hidden" on:click=toggle_sidebar>
                    "☰"
                </button>
                <div class="breadcrumbs text-sm">
                    <ul>
                        <li><a>"Home"</a></li>
                        <li>"Dashboard"</li>
                    </ul>
                </div>
            </div>

            // Right side
            <div class="navbar-end gap-2">
                // Theme toggle
                <button class="btn btn-ghost btn-square" on:click=toggle_theme>
                    {move || match theme.get() {
                        crate::store::Theme::Light => "🌙",
                        crate::store::Theme::Dark => "☀️",
                        crate::store::Theme::Auto => "🌍",
                    }}
                </button>

                // Notifications
                <div class="dropdown dropdown-end">
                    <button class="btn btn-ghost btn-square">
                        "🔔"
                    </button>
                </div>

                // User menu
                <div class="dropdown dropdown-end">
                    <button class="btn btn-ghost btn-circle avatar">
                        <div class="w-10 rounded-full bg-primary text-primary-content flex items-center justify-center">
                            "👤"
                        </div>
                    </button>
                    <ul class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a>"Profile"</a></li>
                        <li><a>"Settings"</a></li>
                        <li><a>"Logout"</a></li>
                    </ul>
                </div>
            </div>
        </header>
    }
}
