import Image from "next/image";
import {MobileNavigation, MainNavigation} from "@/components/Public/Navbar/NavBarLink";
import UserNavBar from "@/components/Public/Navbar/UserNavBar";
import {ABOUT_US_URL, HOME_URL, OUR_THERAPISTS_URL} from "@/lib/constants";

export type NavLinkProps = {
    name: string;
    link: string;
}


export default function DefaultHeader() {
    const defaultLinks: NavLinkProps[] = [
        {
            name: "Home",
            link: HOME_URL,
        },
        {
            name: "About Us",
            link: ABOUT_US_URL,
        },
        // {
        //     name: "Our-Therapists",
        //     link: OUR_THERAPISTS_URL
        // }
    ];

    return (
        <header className="border-b sticky z-[50] top-0 backdrop-blur-xl">

            <div className="flex h-16 items-center justify-between container px-4 lg:px-8 mx-auto">
                {/* main logo */}
                <a className="flex"
                   href="/">
                    <Image
                        src="/logo.webp"
                        alt="TeraChat Logo"
                        className="h-12 md:h-14 w-full dark:invert"
                        width={200}
                        height={100}
                        priority
                    />
                </a>

                {/* main navigation */}
                <MainNavigation links={defaultLinks}/>

                {/* mobile navigation */}
                <MobileNavigation links={defaultLinks}/>


                {/* user navigation options */}
                <UserNavBar/>

            </div>

        </header>
    )
}