import React, { useState, useEffect } from 'react';

import { Layout, Menu, Row, Col } from 'antd';
import { Button } from 'antd';
import { HomeOutlined, ReadOutlined } from '@ant-design/icons';

import classNames from 'classnames';

import logo from './logo.svg';
import './App.less';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect
} from "react-router-dom";

import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

const { Header, Content, Footer } = Layout;
const { SubMenu } = Menu;


function App() {

  return (
    <Router>
      <div className="page">
        <Layout>
          <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
          <div className="logo" >
            <Link to="/pt/">
              <img src="/images/logo.svg" />
            </Link>
          </div>
            <Menu mode="horizontal">
              <Menu.Item key="home" icon={<HomeOutlined />}>
                <Link to="/pt/">Home</Link>
              </Menu.Item>
              <Menu.Item key="about" icon={<ReadOutlined />}>
                <Link to="/pt/about">About</Link>
              </Menu.Item>
              <Menu.Item key="login" >
                <Button type="primary">Login</Button>
              </Menu.Item>
            </Menu>
          </Header>
          <Content>
            <Switch>
              <Route path="/pt/" exact={true} component={Home} />
              <Route path="/pt/about" component={About} />
              <Route path="*" component={NotFound} />
            </Switch>
          </Content>
          <Footer>
            <p>Copyright nuno kappa</p>
          </Footer>
        </Layout>
      </div>
    </Router>
  );
}




export default App;
