import React from "react";
import ClickMarkerMap from "./click-marker-map.component";
import RoundTimer from "./round-timer.component";

export default ({
  roundSeconds,
  onTimeout,
  onSelectPoint,
  onSubmitGuess,
  submitDisabled,
}) => (
  <div className="guess-pane">
    <div className="guess-pane__timer">
      <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
    </div>
    <div className="guess-pane__map">
      <ClickMarkerMap onMarkerMoved={onSelectPoint} />
    </div>
    <button
      className="btn guess-pane__submit"
      onClick={onSubmitGuess}
      disabled={submitDisabled}
    >
      Submit Guess
    </button>
  </div>
);