"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { cn } from "@/lib/utils"

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10)
    window.addEventListener("scroll", onScroll)
    return () => window.removeEventListener("scroll", onScroll)
  }, [])

  return (
    <header className="fixed top-0 left-0 w-full z-50 flex justify-center pt-4">
      
      <nav
        className={cn(
          "flex items-center transition-all duration-500",
          
          scrolled
            ? `
              px-6 py-3
              bg-[rgba(37,37,37,0.6)]
              backdrop-blur-[10px]
              rounded-full
              shadow-[0_20px_60px_rgba(0,0,0,0.65)]
              ring-1 ring-white/10
            `
            : `
              px-6 py-3
              bg-transparent
            `
        )}
      >
        <ul className="flex items-center gap-8 text-sm text-white/80">
          <li>
            <Link href="/" className="hover:text-white transition">
              Home
            </Link>
          </li>
          <li>
            <Link href="/about" className="hover:text-white transition">
              About Me
            </Link>
          </li>
          <li>
            <Link href="/projects" className="hover:text-white transition">
              Projects
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  )
}