use crate::components::auth::*;
use crate::components::theme_button::*;
use leptos::prelude::*;
use thaw::*;

#[component]
pub fn Header() -> impl IntoView {
    let selected_value = expect_context::<RwSignal<String>>();

    view! {
        <div class="flex flex-wrap justify-between">
            <h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
                "Cards For Humanity"
            </h1>
            <ThemeButton />
        </div>
        <div class="flex justify-between">
            <TabList selected_value>
                <Tab value="browser">
                    <Button
                        appearance=ButtonAppearance::Transparent
                        icon=icondata::RiMenuSearchSystemLine
                    />
                </Tab>
                <Tab value="game">
                    <Button appearance=ButtonAppearance::Transparent icon=icondata::LuGamepad />
                </Tab>
            </TabList>
            <div class="mt-2">
                <Auth />
            </div>
        </div>
        <Divider />
    }
}