//! Server-side Mobile Menu Components
//!
//! Static implementation of mobile menu components for server-side rendering.

use ::rustelo_core_lib::i18n::use_unified_i18n;
use leptos::prelude::*;

/// Server-side mobile menu toggle component (renders as static button)
#[component]
pub fn MobileMenuToggle() -> impl IntoView {
    let i18n = use_unified_i18n();

    view! {
        <div class="md:hidden">
            <button
                type="button"
                class="p-2 rounded-md ds-text hover:ds-bg focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded="false"
            >
                <span class="sr-only">{i18n.t("mobile-menu-open")}</span>
                // Always show hamburger icon for SSR
                <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>

            // Mobile menu panel (hidden by default for SSR)
            <div
                id="mobile-menu"
                class="md:hidden border-t ds-border hidden"
            >
                <slot name="menu-content" />
            </div>
        </div>
    }
}

/// Server-side mobile menu with integrated content (renders as static hidden
/// content)
#[component]
pub fn MobileMenu(children: Children) -> impl IntoView {
    let i18n = use_unified_i18n();

    view! {
        <>
            <button
                type="button"
                class="md:hidden p-2 rounded-md ds-text hover:ds-bg focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded="false"
            >
                <span class="sr-only">{i18n.t("mobile-menu-open")}</span>
                // Always show hamburger icon for SSR
                <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>

            // Mobile menu panel (hidden by default for SSR)
            <div
                id="mobile-menu"
                style="display: none"
                class="md:hidden border-t ds-border"
            >
                {children()}
            </div>
        </>
    }
}
