import { Link, useLocation } from "react-router-dom"
import { ThemeToggle } from "@/components/ui/theme-toggle"
import { cn } from "@/lib/utils"

const homeLinks = [
  { label: "Features", href: "#features" },
  { label: "Languages", href: "#languages" },
  { label: "Quick Start", href: "#quickstart" },
]

export function TopNav() {
  const location = useLocation()
  const isDocsPage = location.pathname === "/documentation"
  const homePrefix = location.pathname === "/" ? "" : "/"

  return (
    <div className="absolute top-0 left-0 right-0 z-20">
      <div className="container px-4 md:px-6 pt-4 sm:pt-6">
        <div className="flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-black/30 backdrop-blur-md px-3 py-2.5 sm:px-4">
          <Link to="/" className="flex items-center gap-2 shrink-0">
            <img src="/devour_logo.svg" alt="Devour Logo" className="w-8 h-8" />
            <span className="text-sm sm:text-base font-semibold">Devour</span>
          </Link>

          <nav className="hidden md:flex items-center gap-5 text-sm">
            {homeLinks.map((link) => (
              <a
                key={link.label}
                href={`${homePrefix}${link.href}`}
                className="text-muted-foreground hover:text-foreground transition-colors"
              >
                {link.label}
              </a>
            ))}
            <Link
              to="/documentation"
              className={cn(
                "transition-colors",
                isDocsPage
                  ? "text-cyan-400"
                  : "text-muted-foreground hover:text-foreground"
              )}
            >
              Documentation
            </Link>
          </nav>

          <div className="flex items-center gap-2">
            <Link
              to="/documentation"
              className={cn(
                "md:hidden text-xs font-medium px-2.5 py-1.5 rounded-md border transition-colors",
                isDocsPage
                  ? "border-cyan-500/40 text-cyan-400 bg-cyan-500/10"
                  : "border-white/15 text-muted-foreground hover:text-foreground hover:bg-white/10"
              )}
            >
              Docs
            </Link>
            <ThemeToggle />
          </div>
        </div>
      </div>
    </div>
  )
}
