import React from 'react';
import { ThemedLayoutContextProvider } from '@refinedev/antd';
import { Grid, Layout as AntdLayout } from 'antd';
import { Header } from './header';
import { Sider } from './sider';
import { OffLayoutArea } from 'components/offLayoutArea';

export const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
  const breakpoint = Grid.useBreakpoint();
  const isSmall = typeof breakpoint.sm === 'undefined' ? true : breakpoint.sm;

  return (
    <ThemedLayoutContextProvider>
      <AntdLayout hasSider style={{ minHeight: '100vh' }}>
        <Sider />
        <AntdLayout>
          <Header />
          <AntdLayout.Content
            style={{
              padding: isSmall ? 32 : 16,
              height: 'calc(100vh - 64px)',
              overflowY: 'auto',
            }}
          >
            {children}
          </AntdLayout.Content>
        </AntdLayout>
      </AntdLayout>
      <OffLayoutArea />
    </ThemedLayoutContextProvider>
  );
};
