import { component$ } from "@builder.io/qwik";
import StereoLogo from "../misc/StereoLogo";

export default component$(() => {
    const items = [
        { text: "Synopsis", href: "#" },
        { text: "Discord", href: "#" },
        { text: "Dashboard",        href: "/dashboard", highlighted: true },
        { text: "Pricing",     href: "#" },
        { text: "Terms",       href: "#" }
    ];
    
    return (
        <div
            data-aos="fade-down"
            data-aos-anchor-placement="top-center"
            data-aos-duration="1000"
            class="fixed flex items-center justify-start top-6 left-1/2 transform -translate-x-1/2 bg-neutral-950 p-8 h-10 rounded-full lg:w-2/3 md:w-4/5 w-4/5 z-[9999999] shadow-lg">
            <div class="flex flex-1/3">
                <StereoLogo class="w-10 h-10 text-stereo hover:text-white transition-all duration-300 hover:cursor-pointer" />
            </div>
            <div class="w-full hidden md:flex flex-grow gap-4 items-center justify-center">
                {items.map(({ text, href, highlighted: h }) => (
                    <a
                        key={text}
                        href={href}
                        class={
                            h ? "px-4 py-0.5 hover:text-stereo hover:bg-white rounded-full font-medium bg-stereo text-white transition duration-300 text-lg"
                            : "text-white font-light hover:text-stereo transition duration-300 text-lg"
                        }
                    >
                        {text}
                    </a>
                ))}
            </div>
            <div class="flex flex-1/3 items-center justify-end">
                <span class="text-white group hover:text-stereo transition duration-300 font-medium text-2xl">stereo<span class="text-stereo group-hover:text-white transition duration-300 font-bold">.</span>cat</span>
            </div>
        </div>
    )
});