import React, { Suspense, useState } from 'react';
import { MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons';
import { Button, Layout, theme } from 'antd';

import { link } from 'fs';
import MyRoutes from './MyRoutes';
import MySidebar from './MySidebar';
import { useAuth } from '../contexts/authContext';
import PageWrapper from './PageWrapper/PageWrapper';
import SubHeader from './SubHeader/SubHeader';
import Page from './Page/Page';
import Card, { CardBody } from '../components/bootstrap/Card';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";


const { Header, Sider, Content } = Layout;

const MyHeader: React.FC = () => {

  const {authState} = useAuth();
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();


  return (
  
    <Header style={{ padding: 0, background: colorBgContainer }}>
      <Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => setCollapsed(!collapsed)}
        style={{ fontSize: '16px', width: 64, height: 64,}}
      />
    </Header>

  );
};

export default MyHeader;