import { component$, useStyles$ } from '@builder.io/qwik'
import { useLocation } from '@builder.io/qwik-city'
import { QwikLogo } from '../icons/qwik'
import styles from './header.css?inline'

export default component$(() => {
    useStyles$(styles)

    const { pathname } = useLocation()

    return (
        <header>
            <a class="logo" href="/">
                <QwikLogo />
            </a>
            <nav>
                <a
                    href="/docs"
                    class={{ active: pathname.startsWith('/docs') }}
                >
                    Docs
                </a>
                <a
                    href="/about-us"
                    class={{ active: pathname.startsWith('/about-us') }}
                >
                    About Us
                </a>
            </nav>
        </header>
    )
})