import React, {Component} from 'react';
import { Header, Grid, Message, Button} from 'semantic-ui-react';
import {Link } from "react-router-dom";


export default class FourOhFour  extends Component {

    render() {
        return (
            <div style={{height : "110vh", background: '#1b1c1d'}}>
                <Grid centered>
                    <Grid.Row>
                        <Header as='h1'>404</Header>
                    </Grid.Row>
                    <Grid.Row>
                    <Grid.Column width={10}>
                        <Message>
                            <Message.Header>404 Page Not Found</Message.Header>
                            <p>
                            Hey what are you doing here? 
                            Looks like you are lost, this room does not exist. 
                            </p>
                        </Message>
                        </Grid.Column>
                        <Grid.Column width={6}>
                        <Button >
                            <Link to="/">Go back to our main room</Link>
                        </Button>
                        </Grid.Column>
                    </Grid.Row>
                </Grid>
            </div>
        )
    }
}