import type { Editor as TiptapEditor } from "@tiptap/core";
import { Sun, Moon, X } from "lucide-react";
import { TableOfContents } from "./TableOfContents";

interface Props {
  open: boolean;
  editor: TiptapEditor | null;
  scrollContainer: HTMLElement | null;
  autoCollapse: boolean;
  theme: "light" | "dark";
  onClose: () => void;
  onToggleTheme: () => void;
}

/**
 * Full-height drawer shown on narrow viewports when the user hits the
 * hamburger button in the top bar. Hosts the table of contents and the
 * theme toggle (there is no room for the desktop chrome at that width).
 */
export function MobileTocSidebar({
  open,
  editor,
  scrollContainer,
  autoCollapse,
  theme,
  onClose,
  onToggleTheme,
}: Props) {
  return (
    <>
      <div
        className={`toc-mobile-backdrop${open ? " open" : ""}`}
        onClick={onClose}
      />
      <aside className={`toc-mobile-sidebar${open ? " open" : ""}`}>
        <div className="toc-mobile-sidebar__header">
          <span className="toc-mobile-sidebar__title">Contents</span>
          <div className="toc-mobile-sidebar__actions">
            <button
              className="toc-mobile-sidebar__theme"
              onClick={onToggleTheme}
              aria-label="Toggle theme"
            >
              {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
            </button>
            <button
              className="toc-mobile-sidebar__close"
              onClick={onClose}
              aria-label="Close"
            >
              <X size={16} />
            </button>
          </div>
        </div>
        <div className="toc-mobile-sidebar__body">
          <TableOfContents
            editor={editor}
            scrollContainer={scrollContainer}
            autoCollapse={autoCollapse}
            onNavigate={onClose}
          />
        </div>
      </aside>
    </>
  );
}