import React, { useEffect } from 'react';
import { useNavigate } 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.grey400,
}));

interface IProps {}
interface IState {}

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

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

  return (
    <DPaper className="footer">
      <p>~~~ Footer ~~~</p>
    </DPaper>
  );
};

export default observer(Footer);