import { useEffect, useState } from 'react';
import Link from 'next/link';
import ThemeToggle from './ThemeToggle';
import Icon from './Icon';

const links = [
  { href: '/#about', label: 'About' },
  { href: '/#stack', label: 'Stack' },
];

export default function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`header ${scrolled ? 'is-scrolled' : ''} ${open ? 'is-open' : ''}`}>
      <nav className="navbar shell">
        <Link href="/" className="logo" aria-label="Home" onClick={() => setOpen(false)}>
          <svg className="logo-mark" viewBox="0 0 32 32" aria-hidden="true">
            <rect width="32" height="32" rx="7" fill="#0c0a09" />
            <g fill="none" stroke="#fafaf9" strokeWidth="3" strokeLinecap="round">
              <path d="M11.5 13v9a3.5 3.5 0 0 1-3.5 3.5h-1" />
              <path d="M15.5 18h10a5 5 0 1 0-1.46 3.54" />
            </g>
            <circle cx="11.5" cy="8" r="2" fill="#34d399" />
          </svg>
        </Link>

        <div className="nav-links">
          {links.map((link) => (
            <Link key={link.href} href={link.href} className="nav-link" onClick={() => setOpen(false)}>
              {link.label}
            </Link>
          ))}
        </div>

        <div className="nav-actions">
          <ThemeToggle />
          <button
            type="button"
            className="icon-button nav-menu"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          >
            <Icon name={open ? 'close' : 'menu'} />
          </button>
        </div>
      </nav>
    </header>
  );
}