import React from 'react';
import { APP_VERSION } from '../version';

interface LayoutProps {
  children: React.ReactNode;
  onOpenHelp?: () => void;
}

const Layout: React.FC<LayoutProps> = ({ children, onOpenHelp }) => {
  return (
    <div className="app-root">
      <header className="app-header">
        <div className="app-header-content">
          <div className="app-header-title">
            <span className="app-logo">📄</span>
            <div>
              <h1>PDF Workbench</h1>
              <small>All in your browser</small>
            </div>
          </div>

          <div className="app-header-actions">
            {onOpenHelp && (
              <button
                type="button"
                className="app-help-button"
                onClick={onOpenHelp}
                aria-haspopup="dialog"
                title="Open help and keyboard shortcuts (F1 or ?)"
              >
                Help <span aria-hidden="true">?</span>
              </button>
            )}

            <div className="app-version" title={`Version ${APP_VERSION}`}>
              v{APP_VERSION}
            </div>
          </div>
        </div>
      </header>

      <main className="app-main">{children}</main>
    </div>
  );
};

export default Layout;