import React from "react";
import ClickMarkerMap from "./ClickMarkerMap";
import RoundTimer from "../../util/Timer";

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