import React from "react";
const PropTypes = React.PropTypes;
const transparentBg = require("../styles/index").transparentBg;

const Prompt = (props) => (
  <div className="jumbotron col-sm-6 col-sm-offset-3 text-center"
    style={transparentBg}>
    <h1>{props.header}</h1>
    <div className="col-sm-12">
      <form onSubmit={props.onSubmitUser}>
        <div className="form-group">
          <input
            className="form-control"
            onChange={props.onUpdateUser}
            placeholder="Github username"
            type="text"
            value={props.username}
          />
        </div>
        <div className="form-group col-sm-4 col-sm-offset-4">
          <button type="submit" className="btn btn-block btn-success">
            Continue
          </button>
        </div>
      </form>
    </div>
  </div>
);

Prompt.propTypes = {
  header: PropTypes.string.isRequired,
  onSubmitUser: PropTypes.func.isRequired,
  onUpdateUser: PropTypes.func.isRequired,
  username: PropTypes.string.isRequired
};

export default Prompt;