import { Search } from "lucide-react";
import { COLORS, FONT } from "./theme";
import { PresetPicker } from "./PresetPicker";

/** Top-of-grid toolbar: layout presets on the left, scrollback search on the right (search is a mock). */
export function CenterToolbar({ selected, onSelect, onOpenSearch }: { selected: string; onSelect: (id: string) => void; onOpenSearch: () => void }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 12px", height: 46, borderBottom: `1px solid ${COLORS.borderSubtle}` }}>
      <PresetPicker selected={selected} onSelect={onSelect} />
      <div style={{ flex: 1 }} />
      <div
        title="Search scrollback"
        onClick={onOpenSearch}
        style={{
          display: "flex", alignItems: "center", gap: 6, height: 24, padding: "0 8px", borderRadius: 6,
          background: COLORS.bgPanel, border: `1px solid ${COLORS.borderSubtle}`, cursor: "pointer",
        }}>
        <Search size={12} color={COLORS.textMuted} />
        <span style={{ fontFamily: FONT.ui, fontSize: 11, color: COLORS.textMuted }}>Search scrollback</span>
        <span style={{ fontFamily: FONT.mono, fontSize: 11, color: COLORS.textMuted }}>⌘F</span>
      </div>
    </div>
  );
}