"use client"
import { useState, useEffect } from "react"
import { Moon, Sun, Menu, X } from "lucide-react"
import Link from "next/link"
export default function Header() {
const [mounted, setMounted] = useState(false)
const [isDark, setIsDark] = useState(false)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
useEffect(() => {
const updateState = () => {
setMounted(true)
setIsDark(document.documentElement.classList.contains("dark"))
}
const rafId = requestAnimationFrame(updateState)
return () => cancelAnimationFrame(rafId)
}, [])
const toggleTheme = () => {
const html = document.documentElement
const newIsDark = !isDark
if (newIsDark) {
html.classList.add("dark")
} else {
html.classList.remove("dark")
}
setIsDark(newIsDark)
}
return (
<header className="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur-sm">
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="flex flex-col">
<h1 className="text-lg font-bold text-foreground">SOLx402</h1>
<p className="text-xs text-muted-foreground">MCP Server</p>
</div>
</div>
<nav className="hidden items-center gap-1 md:flex">
<Link href="/#tools" className="rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors">Tools</Link>
<Link href="/#integration" className="rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors">Integration</Link>
<Link href="/#config" className="rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors">Config</Link>
<Link href="/playground" className="rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors">Playground</Link>
</nav>
<div className="flex items-center gap-2">
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors md:hidden"
aria-label="Toggle menu"
>
{isMobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</button>
{mounted && (
<button
onClick={toggleTheme}
className="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
aria-label="Toggle dark mode"
>
{isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
</button>
)}
</div>
</div>
</div>
{isMobileMenuOpen && (
<div className="border-b border-border bg-background md:hidden">
<div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
<nav className="flex flex-col gap-1">
{["Tools", "Integration", "Config"].map((item) => (
<Link
key={item}
href={`#${item.toLowerCase()}`}
onClick={() => setIsMobileMenuOpen(false)}
className="rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted transition-colors"
>
{item}
</Link>
))}
</nav>
</div>
</div>
)}
</header>
)
}
