import React from 'react';

const PlanElement = (props: {
  trainIdentifier: string,
  trainHeading: string,
  stops: {
    time: string,
    delay?: number,
    name: string
  }[]
}) => {
  return (
    <div className={"grid grid-cols-2"}>
      <div className={"bg-white text-blue-900 px-4 py-0.5"}>
        {props.trainIdentifier}
      </div>

      <div className={"px-2 py-0.5 w-full"}>
        {props.trainHeading}
      </div>

      {props.stops.map(stop => (
        <>
          <div>
            {stop.time}

            {(stop.delay && stop.delay > 0) && (
              <span>
                  + {stop.delay}
                </span>
            )}
          </div>

          <div>
            {stop.name}
          </div>
        </>
      ))}
    </div>
  );
};

export default PlanElement;