import { Alert, Layout, theme } from "antd";
import PropTypes from 'prop-types';
const { Header, Content } = Layout;

import '../App.css'
import SFooter from "./Footer";

const UnauthPage = ({ content, alert }) => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div
          className="demo-logo"
          style={{ margin: '0 30px' }}
        >
          <h2>Spectrometer</h2>
        </div>
      </Header>
      <Content>
        {alert && <Alert type={alert.type} message={alert.msg} banner />}
        <div
          className="site-layout-content"
          style={{
            padding: '16px 50px',
            background: colorBgContainer,
          }}
        >
          {content}
        </div>
      </Content>
      <SFooter />
    </Layout>
  );
};

UnauthPage.propTypes = {
  content: PropTypes.element.isRequired,
  alert: PropTypes.object,
};

export default UnauthPage;