"use client";

import type { RefObject } from "react";
import { PanelLeft, PanelRight } from "lucide-react";

import { Button } from "@/components/ui/Button";

interface MobileContextBarProps {
  chapterNo: number;
  onOpenChapters: () => void;
  onOpenAssistant: () => void;
  chapterTriggerRef: RefObject<HTMLButtonElement | null>;
  assistantTriggerRef: RefObject<HTMLButtonElement | null>;
}

// 窄屏/中屏顶部上下文条：目录 / 本章参考经抽屉触达；≥xl 直显三栏、此条隐藏。
export function MobileContextBar({
  chapterNo,
  onOpenChapters,
  onOpenAssistant,
  chapterTriggerRef,
  assistantTriggerRef,
}: MobileContextBarProps) {
  return (
    <div className="flex items-center justify-between gap-2 border-b border-line bg-panel px-4 py-2 xl:hidden">
      <Button
        ref={chapterTriggerRef}
        onClick={onOpenChapters}
        variant="secondary"
        size="sm"
      >
        <PanelLeft className="h-4 w-4" aria-hidden="true" />
        目录
      </Button>
      <span className="min-w-0 truncate font-mono text-xs text-ink-soft">
        第 {chapterNo} 章
      </span>
      <Button
        ref={assistantTriggerRef}
        onClick={onOpenAssistant}
        variant="secondary"
        size="sm"
      >
        <PanelRight className="h-4 w-4" aria-hidden="true" />
        助手
      </Button>
    </div>
  );
}