import { ReactNode } from 'react'

interface LayoutProps {
  children: ReactNode
}

export default function Layout({ children }: LayoutProps) {
  const handleBackToStudio = () => {
    // Navigate back to Studio
    if (window.parent !== window) {
      window.parent.postMessage({ type: 'CLOSE_KLAUSUR_SERVICE' }, '*')
    } else {
      window.location.href = '/studio'
    }
  }

  return (
    <div className="app-layout">
      <div className="main-content">
        <header className="topbar">
          <div className="brand">
            <div className="brand-logo">BP</div>
            <div className="brand-text">
              <span className="brand-text-main">BreakPilot</span>
              <span className="brand-text-sub">Klausur-Korrektur</span>
            </div>
          </div>
          <div className="topbar-actions">
            <button className="btn btn-ghost" onClick={handleBackToStudio}>
              Zurueck zum Studio
            </button>
          </div>
        </header>
        {children}
      </div>
    </div>
  )
}