import { Outlet, useNavigate } from 'react-router-dom';
import { Layout, Flex, theme } from 'antd';
import BackBtn from './BackBtn';

const { Content, Header } = Layout;
const HeaderWrapper = ({ children, header, ...props }) => {
  const navigate = useNavigate();
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <>
      <Layout className=''>
        <Header className='header px-6 h-10 ' style={{ background: 'white' }}>
          <Flex justify={'space-between'} align={'center'} className='h-full'>
            {/* {header} */}
            <div className="grow h-full">{header}</div>
            <BackBtn />
          </Flex>
        </Header>
        <Content className='' style={{ backgroundColor: colorBgContainer }}>
          {children || <Outlet />}
        </Content>
      </Layout>
    </>
  );
};
export default HeaderWrapper;
