import { AppShell } from '@mantine/core'
import { useState, type ReactNode } from 'react'
import Navbar from '../Navbar/Navbar'
import classes from './BasePage.module.css'

export const BasePage = ({ main }: { main: ReactNode }) => {
  const [isCompactMenu, setIsCompactMenu] = useState<boolean>(false)
  const handleSetCompactMenu = () => {
    setIsCompactMenu((prev: boolean) => !prev)
  }
  return (
    <>
      <AppShell
        // header={{ height: { base: 60, md: 70, lg: 80 } }}
        padding="md"
        // footer={{ height: 320 }}
        navbar={{
          width: {
            base: isCompactMenu ? '80' : '180',
            lg: isCompactMenu ? '80' : '250',
          },
          breakpoint: 'base',
        }}
      >
        {/* <AppShell.Header> */}
        {/* <Header header={header} setHeader={setHeader}></Header> */}
        {/* </AppShell.Header> */}

        <AppShell.Navbar className={classes.appShellNavbar}>
          <Navbar
            handleSetCompactMenu={handleSetCompactMenu}
            isCompactMenu={isCompactMenu}
          />
        </AppShell.Navbar>
        <AppShell.Main h={'100%'} className={classes.appShellMain}>
          {main}
        </AppShell.Main>

        {/* <AppShell.Footer pos={'relative'}>
          <Footer></Footer>
        </AppShell.Footer> */}
      </AppShell>
    </>
  )
}

export default BasePage
