import React, { Component } from 'react';

import './css/TrafficInfo.css';

import busIcon from '../img/bus.svg';
import warningIcon from '../img/warning.svg';

class TrafficEntry extends Component {
    render() {
        let trafficInfo = this.props.departure.trafficInfo;
        let lineInterference = trafficInfo !== "" && trafficInfo !== null && trafficInfo !== undefined;

        return (
            <div className="trafficEntry">
                <div>
                    <div className="timeColumn">
                        <span>{this.props.departure.time}</span>
                        {lineInterference &&
                                <img src={warningIcon} alt=""></img>
                        }
                    </div>
                    <div className="lineColumn">
                        <div>
                            <span className="lineName">{this.props.departure.lineName}</span>
                            <img src={busIcon} alt=""></img>
                            <span className="destination">{this.props.departure.finalStop}</span>
                        </div>
                        {lineInterference &&
                            <p>{trafficInfo} <u>Visa mer</u></p>
                        }
                    </div>
                </div>

                {lineInterference &&
                    <button>Hitta annan resväg</button>
                }
            </div>
        );
    }
}

export default TrafficEntry;