import { useEffect, useState } from "react";
import Link from "next/link";

export default function ReaderNav({ chapterName }) {
  const [scrolled, setScrolled] = useState(false);

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

  return (
    <nav className={`nav reader-nav${scrolled ? " scrolled" : ""}`}>
      <div className="nav-in">
        <Link className="logo" href="/">
          AIBook<b>.</b>
          <span className="dot">fun</span>
        </Link>

        <div className="nav-links reader-links">
          <Link href="/read">Library</Link>
          {chapterName ? (
            <span className="nav-current" aria-current="page">
              {chapterName}
            </span>
          ) : (
            <span className="nav-current" aria-current="page">
              Library
            </span>
          )}
        </div>

        <Link href="/#get" className="btn btn-primary nav-cta">
          Get the preview
        </Link>
      </div>
    </nav>
  );
}