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} wrapperClassName='h-full [&_.ant-spin-container]:h-full' >
        <Layout className=' bg-white h-full'>
          <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>
              {backTo!==false && <BackBtn to={backTo} />}
            </Flex>
          </Header>
          <Divider className='my-2' />
          <Content className='overflow-auto' style={{ backgroundColor: colorBgContainer }}>
            {children || <Outlet />}
          </Content>
        </Layout>
      </Spin>
    </>
  );
};
export default HeaderWrapper;