import { LogOut, RotateCcw } from "lucide-react";
import ThemeSwitch from "./ThemeSwitch";
import { closeWindow, startWindowDrag } from "../utils/navigation";

export default function TitleBar({ title, theme, setTheme, compact = false, onClose }) {
  return (
    <header className="glass-bar relative z-10 flex items-center justify-between gap-4 border-b border-line px-5 py-2">
      <div
        data-tauri-drag-region
        className="flex min-w-0 flex-1 cursor-pointer select-none items-center gap-3 self-stretch"
        onPointerDown={(event) => {
          if (event.button === 0) startWindowDrag();
        }}
      >
        <div className="min-w-0">
          <h1 data-tauri-drag-region className="truncate text-[18px] font-medium leading-tight">{title}</h1>
        </div>
      </div>
      <div className="flex shrink-0 items-center gap-5">
        <ThemeSwitch theme={theme} setTheme={setTheme} />
        {!compact ? (
          <>
            <button className="icon-btn" aria-label="重启"><RotateCcw size={16} strokeWidth={2.5} /></button>
            <button className="icon-btn" aria-label="退出"><LogOut size={16} strokeWidth={2.5} /></button>
          </>
        ) : (
          <button className="btn-secondary h-9 px-3" onClick={onClose || closeWindow}>关闭</button>
        )}
      </div>
    </header>
  );
}
