import { useState, type ReactNode } from 'react';
import { cn } from '../lib/cn';

export interface NavLink {
  label: string;
  href: string;
  active?: boolean;
}

export interface NavbarProps {
  brand?: ReactNode;
  links?: NavLink[];
  actions?: ReactNode;
  className?: string;
}

export function Navbar({ brand, links = [], actions, className }: NavbarProps) {
  const [open, setOpen] = useState(false);

  return (
    <nav
      className={cn(
        'w-full bg-surface border-b border-border',
        className
      )}
    >
      <div className="mx-auto flex h-16 items-center justify-between px-4 md:px-6">
        <div className="flex items-center gap-8">
          {brand && <div className="flex items-center text-text font-semibold">{brand}</div>}
          <ul className="hidden md:flex items-center gap-1">
            {links.map((l) => (
              <li key={l.href}>
                <a
                  href={l.href}
                  aria-current={l.active ? 'page' : undefined}
                  className={cn(
                    'inline-flex items-center px-3 py-2 text-sm rounded-md transition-colors',
                    l.active
                      ? 'text-text bg-surface-2'
                      : 'text-text-2 hover:text-text hover:bg-surface-2'
                  )}
                >
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
        </div>

        <div className="hidden md:flex items-center gap-2">{actions}</div>

        <button
          type="button"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
          className="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-md text-text-2 hover:text-text hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            {open ? (
              <>
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
              </>
            ) : (
              <>
                <line x1="3" y1="6" x2="21" y2="6" />
                <line x1="3" y1="12" x2="21" y2="12" />
                <line x1="3" y1="18" x2="21" y2="18" />
              </>
            )}
          </svg>
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-border bg-surface">
          <ul className="flex flex-col px-4 py-2">
            {links.map((l) => (
              <li key={l.href}>
                <a
                  href={l.href}
                  aria-current={l.active ? 'page' : undefined}
                  className={cn(
                    'block px-3 py-2 text-sm rounded-md',
                    l.active
                      ? 'text-text bg-surface-2'
                      : 'text-text-2 hover:text-text hover:bg-surface-2'
                  )}
                >
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
          {actions && <div className="flex items-center gap-2 px-4 py-3 border-t border-border">{actions}</div>}
        </div>
      )}
    </nav>
  );
}