'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { ThemeToggle } from '@/components/theme-toggle'

export function Navbar() {
  const [isVisible, setIsVisible] = useState(true)
  const [lastScrollY, setLastScrollY] = useState(0)

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY

      if (currentScrollY < 10) {
        setIsVisible(true)
      } else if (currentScrollY > lastScrollY) {
        setIsVisible(false)
      } else {
        setIsVisible(true)
      }

      setLastScrollY(currentScrollY)
    }

    window.addEventListener('scroll', handleScroll, { passive: true })
    return () => window.removeEventListener('scroll', handleScroll)
  }, [lastScrollY])

  return (
    <nav
      className={`border-b-4 border-slate-700 bg-slate-900 dark:bg-zinc-950 sticky top-0 z-50 ${isVisible ? 'navbar-visible' : 'navbar-hidden'}`}
    >
      <div className="max-w-7xl mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-8">
            <Link
              href="/"
              className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer"
              style={{ color: 'var(--neon-cyan)' }}
            >
              &lt; HOME
            </Link>
            <span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
              // <span style={{ color: 'var(--neon-pink)' }}>BLOG</span> ARCHIVE
            </span>
          </div>
          <div className="flex items-center gap-6">
            <Link
              href="/about"
              className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
            >
              [ABOUT]
            </Link>
            <ThemeToggle />
          </div>
        </div>
      </div>
    </nav>
  )
}