import React from "react";
import { NavLink, Link } from "react-router-dom";
import { ScanFace, UserPlus, LayoutDashboard, House, BookOpen } from "lucide-react";

export default function Header() {
  const linkCls = ({ isActive }) =>
    `px-3 py-2 text-sm font-semibold rounded-md transition-all duration-150 ${
      isActive
        ? "text-cyan_glow bg-cyan_glow/10 border border-cyan_glow/30"
        : "text-white/70 hover:text-white hover:bg-white/5"
    }`;
  return (
    <header className="sticky top-0 z-40 glass border-b border-white/10">
      <div className="max-w-[1400px] mx-auto px-6 py-3 flex items-center justify-between">
        <Link to="/" className="flex items-center gap-3" data-testid="brand-link">
          <div
            className="w-9 h-9 rounded-md flex items-center justify-center"
            style={{
              background:
                "linear-gradient(45deg, #8A2BE2 0%, #0057FF 50%, #00F0FF 100%)",
              boxShadow: "0 0 20px rgba(0, 240, 255, 0.35)",
            }}
          >
            <ScanFace size={20} className="text-black" />
          </div>
          <div className="leading-tight">
            <div className="font-display font-extrabold text-lg tracking-tight">
              FaceGuard
            </div>
            <div className="tag-eyebrow -mt-0.5">BIOMETRIC ATTENDANCE</div>
          </div>
        </Link>
        <nav className="flex items-center gap-1">
          <NavLink to="/" end className={linkCls} data-testid="nav-home">
            <span className="inline-flex items-center gap-2"><House size={14} /> Beranda</span>
          </NavLink>
          <NavLink to="/register" className={linkCls} data-testid="nav-register">
            <span className="inline-flex items-center gap-2"><UserPlus size={14} /> Daftar</span>
          </NavLink>
          <NavLink to="/attendance" className={linkCls} data-testid="nav-attendance">
            <span className="inline-flex items-center gap-2"><ScanFace size={14} /> Absen</span>
          </NavLink>
          <NavLink to="/admin" className={linkCls} data-testid="nav-admin">
            <span className="inline-flex items-center gap-2"><LayoutDashboard size={14} /> Dasbor</span>
          </NavLink>
          <NavLink to="/docs" className={linkCls} data-testid="nav-docs">
            <span className="inline-flex items-center gap-2"><BookOpen size={14} /> Docs</span>
          </NavLink>
        </nav>
      </div>
    </header>
  );
}