import React, { Component } from 'react';

import TrafficEntry from './TrafficEntry.js';

import './css/TrafficInfo.css';

class TrafficList extends Component {
    render() {
        let entries = [];
        
        if (this.props.departures) {
            let i = 0; // React requires elems in array to have associated unique key

            this.props.departures.forEach(departure => {
                entries.push(
                    <TrafficEntry key={i++} departure={departure} />
                );
            });

            // Add separator between every element
            const intersperse = (arr, sep) => arr.reduce((a,v)=>[...a,v,sep],[]).slice(0,-1);
            entries = intersperse(entries, (<hr key={i++} />));

            // Add separator after the last element
            entries.push(<hr key={i++} />);
        }

        return (
            <div id="trafficList">
                {entries.map(element => {     
                    return element 
                })}
            </div>
        );
    }
}

export default TrafficList;