import React from 'react'
import { useFormEditorActions } from '../context/FormEditorActionsContext'
import PageReturnButton from './PageReturnButton'

/**
 * Vollseiten-Editor: Zurück-Schalter + Titel oben; FormActionBar fix unten (FormEditorBottomSlot).
 */
export default function PageFormEditorChrome({
  title,
  fallbackPath,
  fallbackLabel,
  actionConfig,
  children,
  testId,
  showReturn = true,
}) {
  useFormEditorActions(actionConfig)

  return (
    <div className="page-form-editor" data-testid={testId}>
      <header className="page-form-editor__header">
        {showReturn && fallbackPath && fallbackLabel ? (
          <PageReturnButton
            fallbackPath={fallbackPath}
            fallbackLabel={fallbackLabel}
            className="page-return-btn page-form-editor__back btn btn-secondary btn-small"
          />
        ) : null}
        <h1 className="page-form-editor__title">{title}</h1>
      </header>
      <div className="page-form-editor__body">{children}</div>
    </div>
  )
}