import React from 'react'

import { AppShell, Header, Center, Loader } from '@mantine/core'

import TopBar from './TopBar'

const AppLayout: React.FC<
  React.PropsWithChildren<{
    navbar?: React.ReactElement
    contentLoading?: boolean
  }>
> = ({ children, navbar, contentLoading = false }) => {
  return (
    <AppShell
      padding={24}
      navbar={navbar}
      header={
        <Header height={56} px={24}>
          <TopBar />
        </Header>
      }
    >
      {contentLoading ? (
        <Center style={{ height: '100%' }}>
          <Loader variant='bars' size='md' />
        </Center>
      ) : !navbar ? (
        <div className='mx-auto max-w-[1880px]'>{children}</div>
      ) : (
        <>{children}</>
      )}
    </AppShell>
  )
}

export default AppLayout