// Genesis (docs/DESIGN.md) Navigation: sticky แถบบน 56px + backdrop-blur + เส้นแบ่ง
// ล่าง 1px — โลโก้ซ้าย / ผู้ใช้ + ออกจากระบบ ขวา (แอปหน้าเดียวต่อ context จึงไม่มี
// ลิงก์กลางจอ) ใช้ร่วมทุกหน้าเนื้อหา (หน้ารายการ /, กลุ่ม /groups/[typeId]) —
// แทน SessionBar เดิมที่แยกเป็นแถบของตัวเองกลางหน้า
import Link from "next/link";

import LogoutButton from "./LogoutButton";

export default function AppNav({ userName }: { userName: string }) {
  return (
    // appnav: hook ของกฎ coarse 44px ให้ปุ่มในแถบนี้ (globals.css — อย่าถอด)
    <header className="appnav sticky top-0 z-40 h-14 border-b border-line bg-white/80 backdrop-blur">
      <div className="mx-auto flex h-full max-w-7xl items-center justify-between gap-3 px-4 sm:px-6">
        {/* ชื่อแบรนด์เป็น ink ตามกฎ "น้ำเงินเฉพาะของ interactive" — tile JN น้ำเงินคือ
            แบรนด์มาร์ก (สืบต่อจากหน้าสรุป/login ดั้งเดิม) ทั้งแถบเป็นลิงก์กลับหน้ารายการ */}
        <Link
          href="/"
          className="focus-ring flex min-w-0 items-center gap-2.5 rounded-md"
        >
          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-xs font-bold text-white">
            JN
          </span>
          <span className="font-display truncate text-[15px] font-bold tracking-tight text-ink">
            Judge&apos;s Note
          </span>
        </Link>
        <div className="flex min-w-0 items-center gap-3">
          <p className="hidden min-w-0 truncate text-sm text-ink-soft sm:block">
            {userName}
          </p>
          <LogoutButton />
        </div>
      </div>
    </header>
  );
}