'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ThemeToggle } from './ThemeToggle';

export function Navbar() {
    const pathname = usePathname();

    const isActive = (path: string) => pathname?.startsWith(path);

    return (
        <nav
            aria-label="Main navigation"
            className="fixed left-0 top-0 z-50 w-full border-b border-line bg-paper-overlay"
        >
            <div className="mx-auto flex h-14 max-w-[72rem] items-center justify-between gap-6 px-5 sm:px-6">
                <Link href="/" className="flex items-baseline gap-2.5 transition-opacity hover:opacity-75">
                    <span className="text-[0.96rem] font-medium tracking-[-0.03em] text-ink">
                        Akshay Kolli
                    </span>
                    <span className="hidden font-mono text-[0.65rem] uppercase tracking-[0.14em] text-muted-strong sm:inline">
                        Research
                    </span>
                </Link>

                <div className="flex items-center gap-4 text-[0.68rem] font-mono uppercase tracking-[0.14em] text-muted-strong sm:gap-5">
                    <Link
                        href="/"
                        className={`transition-colors ${pathname === '/' ? 'text-ink' : 'hover:text-ink'}`}
                    >
                        Home
                    </Link>
                    <Link
                        href="/blog"
                        className={`transition-colors ${isActive('/blog') ? 'text-ink' : 'hover:text-ink'}`}
                    >
                        Writing
                    </Link>
                    <Link
                        href="/resume"
                        className={`transition-colors ${isActive('/resume') ? 'text-ink' : 'hover:text-ink'}`}
                    >
                        Resume
                    </Link>
                    <a
                        href="https://github.com/akkolli"
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label="GitHub profile"
                        className="hidden transition-colors hover:text-ink sm:block"
                    >
                        GitHub
                    </a>
                    <ThemeToggle />
                </div>
            </div>
        </nav>
    );
}
