import { Outlet } from 'react-router-dom';
import { useState } from 'react';
import TopBar from './TopBar';
import LeftSidebar from './LeftSidebar';
import StudioFooter from './StudioFooter';
import { runtimeConfig } from '@/lib/runtime-config';

const StudioShell = () => {
  const [bright, setBright] = useState(false);
  return (
    <div className={`${bright ? 'studio-shell light-studio' : 'studio-shell'} ${runtimeConfig.embedded ? 'shire-embedded' : ''}`}>
      <div className="flex min-w-0 flex-1 flex-col">
        <TopBar onMenu={() => setBright(v => !v)} />
        <div className="flex min-h-0 flex-1">
          <LeftSidebar />
          <main className="min-w-0 flex-1 overflow-y-auto">
            <Outlet />
          </main>
        </div>
        <StudioFooter />
      </div>
    </div>
  );
};
export default StudioShell;