import React, { ReactNode } from 'react';
import { Box } from 'folds';

type ClientLayoutProps = {
  nav: ReactNode;
  children: ReactNode;
};
export function ClientLayout({ nav, children }: ClientLayoutProps) {
  return (
    <>
      <a
        href="#main-content"
        style={{
          position: 'absolute',
          top: '-40px',
          left: 0,
          padding: '8px 16px',
          background: '#000',
          color: '#fff',
          zIndex: 9999,
          borderRadius: '0 0 4px 0',
          transition: 'top 0.1s',
        }}
        onFocus={(e) => {
          (e.currentTarget as HTMLElement).style.top = '0';
        }}
        onBlur={(e) => {
          (e.currentTarget as HTMLElement).style.top = '-40px';
        }}
      >
        Skip to main content
      </a>
      <Box grow="Yes">
        <Box shrink="No" as="nav" aria-label="Room navigation">
          {nav}
        </Box>
        <Box grow="Yes" as="main" id="main-content">
          {children}
        </Box>
      </Box>
    </>
  );
}