import { Outlet } from 'react-router-dom';
import { Navigation } from './Navigation';

export function Layout() {
  return (
    <div className="min-h-screen bg-[var(--color-void)]">
      <Navigation />

      {/* Main content area - centered with nav offset */}
      <main
        style={{
          minHeight: '100vh',
          paddingTop: '24px',
          paddingBottom: '96px',
          paddingLeft: '16px',
          paddingRight: '16px',
          marginLeft: 'var(--nav-width, 0)',
        }}
      >
        <div
          style={{
            maxWidth: '1200px',
            margin: '0 auto',
            width: '100%',
          }}
        >
          <Outlet />
        </div>
      </main>
    </div>
  );
}
