import React, { Component } from 'react';
import Spot from './spot.jsx';

class Block extends Component {
  /** */
  render() {
    let {
      breakId,
      programmeAfter,
      programmeBefore,
      programmeBeforeTime,
      programmeAfterTime,
      schedDate,
      schedStartTime,
      spots,
      mediumId
    } = this.props;

    return (
      <div className="block">
        <div className="spotsContainer" style={{ width: `${200 + spots.length * 215}px` }}>
          <div className="showWrapper">
            <div className="show previous">
              <div className="showTitle" title={programmeBefore}>{programmeBefore}</div>
              <div className="showTime" title={programmeBeforeTime}>{programmeBeforeTime}</div>
            </div>
          </div>
          <div className="spots" style={{ width: `${spots.length * 215}px` }}>
            {spots.map((s) => (<Spot key={s.spotId} {...s}
              mediumId={mediumId}
              schedStartTime={schedStartTime} />))}
          </div>
          <div className="showWrapper">
            <div className="show after">
              <div className="showTitle" title={programmeAfter}>{programmeAfter}</div>
              <div className="showTime" title={programmeAfterTime}>{programmeAfterTime}</div>
            </div>
          </div>
        </div>
      </div>
      );
  }
}

export default Block;