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

export function Layout() {
  return (
    <div style={{
      minHeight: '100dvh',
      background: 'var(--color-void)',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <Navigation />

      <main style={{
        flex: 1,
        minHeight: '100dvh',
        paddingTop: 'max(var(--safe-top, 0px), 16px)',
        paddingBottom: 'calc(var(--nav-height) + var(--safe-bottom, 0px) + 16px)',
        paddingLeft: '16px',
        paddingRight: '16px',
        marginLeft: 'var(--nav-width, 0)',
        WebkitOverflowScrolling: 'touch',
      }}>
        <div style={{
          maxWidth: '1200px',
          margin: '0 auto',
          width: '100%',
        }}>
          <Outlet />
        </div>
      </main>
    </div>
  );
}
