import type { ReactNode } from 'react';

import { documentEditorFrameClass } from './documentEditorStyles';

export type DocumentEditorFrameProps = {
  className?: string;
  children: ReactNode;
};

/**
 * Shared chrome for every editor backend (border, surface, flex layout).
 * Backend editors render their engine as children.
 */
export function DocumentEditorFrame({
  className,
  children,
}: DocumentEditorFrameProps) {
  return (
    <div
      className={`${documentEditorFrameClass}${className ? ` ${className}` : ''}`}
    >
      {children}
    </div>
  );
}