import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import MenuButton from './MenuButton';

import './css/BottomMenu.css';
import ticketsIcon from '../img/tickets.svg';
import ticketsBuyIcon from '../img/tickets+.svg';
import travelIcon from '../img/tram.svg';
import trafficIcon from '../img/traffic.svg';

class BottomMenu extends Component {
    render() {
        return (
            <div id="bottomMenu">
                <Link to="/tickets">
                    <MenuButton label="Biljetter" icon={ticketsIcon}/>
                </Link>
                
                <Link to="/ticketsBuy">
                    <MenuButton label="Köp biljett" icon={ticketsBuyIcon}/>
                </Link>

                <Link to="/travel">
                    <MenuButton label="Reseplanering" icon={travelIcon}/>
                </Link>

                <Link to="/traffic">
                    <MenuButton label="Trafikinfo" icon={trafficIcon}/>
                </Link>
            </div>
        );
    }
}

export default BottomMenu;