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

const { Content, Header } = Layout;
const HeaderWrapper = ({ children, header, loading, backTo, ...props }) => {
  const navigate = useNavigate();
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <>
      <Spin spinning={loading || false}>
        <Layout className=' bg-white'>
          <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 to={backTo} />
            </Flex>
          </Header>
          <Divider className='my-2' />
          <Content className='' style={{ backgroundColor: colorBgContainer }}>
            {children || <Outlet />}
          </Content>
        </Layout>
      </Spin>
    </>
  );
};
export default HeaderWrapper;
