"use client";

import { signIn } from "next-auth/react";
import { Session } from "next-auth";

import Styles from "./Header.module.scss";

import { NavigationComponent } from "@/components/navigation/NavigationComponent";
import { UserDropdown } from "@/components/dropdown/UserDropdown";
import { ToggleTheme } from "@/components/ToggleTheme";

import { Button } from "@/components/ui/button";

export function HeaderComponent({ session }: { session: Session | null }) {
    return (
        <header className={`${Styles.header} border-b`}>
            <div className={`${Styles.header__content}`}>
                <a className={`${Styles.header__name} text__underline`}>Walkaisa</a>

                <NavigationComponent />

                {session && session.user ? (
                    <UserDropdown session={session} />
                ) : (
                    <Button variant="default" onClick={() => signIn("discord", { callbackUrl: window.location.origin })}>
                        Login
                    </Button>
                )}

                <ToggleTheme />
            </div>
        </header>
    );
}

export default HeaderComponent;