import { useEditorSlot } from './useEditorSlot';

/**
 * Where an editor opens — a column beside the preview rather than a drawer beneath it.
 *
 * It was rendered under the frame, which took the height from the thing being edited: choosing a
 * spacing shrank the page you were choosing it for, and on a laptop the preview lost a third of itself
 * to a row of two dropdowns. A panel keeps the page whole and puts the controls where a workspace puts
 * controls.
 *
 * It holds nothing. The panel that owns a selection builds the editor and announces it — see
 * useEditorSlot for why it carries the element rather than a description of one.
 */
export const EditorPanel = () => {
  const [editor] = useEditorSlot();

  if (!editor) {
    return (
      <div className="flex size-full items-center justify-center p-6 text-center">
        {/* Names what the panel is FOR rather than saying it is empty. "Nothing selected" describes
            this component's state; this describes the reader's next move. */}
        <p className="text-xs text-muted-foreground">
          Pick a block in the page to edit it, or press Spacing on a band.
        </p>
      </div>
    );
  }

  return <div className="size-full overflow-auto p-3">{editor}</div>;
};