import React, { Component } from 'react';

import { Container, Message } from 'semantic-ui-react';

import MainMenu from '../../components/MainMenu';
import { mainMenuItems } from '../../constants/menuItems';
import {CONTAINER_WIDTH_PERCENTAGE} from "../../constants/constants";

class Home extends Component {

    render () {
        return (
            <Container style={ {width: `${CONTAINER_WIDTH_PERCENTAGE}%`} }>
                <MainMenu/>
                <h3>SIMA SPACE </h3>
                <hr/>
                {
                    mainMenuItems.map((menuItem) => {
                        const { id, showOnHomePage, title, description, url} = menuItem;
                        if (showOnHomePage){
                            return (
                                <Message key={id} size={'large'}>
                                    <a href={url}><Message.Header>{title}</Message.Header></a>
                                    <br/>
                                    {description}
                                </Message>
                            );
                        }
                        return null;
                    })
                }
            </Container>
        );
    }
}

export default Home;