import React, { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Button } from '@mui/material';
import { styled } from '@mui/system';

import './scss/index.scss';
import { FlexColumnPaper } from '@styled/index';
import { Grey } from '@tool/color/index';

interface IProps {}
interface IState {}

const DPaper = styled(FlexColumnPaper)(() => ({
  backgroundColor: Grey.grey300,
}));

const Header = (props: IProps, state: IState) => {
  const navi = useNavigate;

  useEffect(() => {
    return () => {};
  }, []);

  return (
    <DPaper className="header">
      <p>~~~ Header ~~~</p>
      <p>
        <Link to="/">Home Page</Link>
        <span>&nbsp;---&nbsp;</span>
        <Link to="setting">Setting Page</Link>
      </p>
    </DPaper>
  );
};

export default observer(Header);