import * as React from "react";

interface IHeader {
  name: string,
  namespace: string
}

/**
 * The Component for the header of the repo page
 * @param {string} name - The name of the repository
 * @param {string} namespace - The namespace of the repository 
 */
class repoHeader extends React.Component<IHeader, {}> {
  static propTypes = {
    name: React.PropTypes.string.isRequired,
    namespace: React.PropTypes.string.isRequired
  }
  render () {
    return(
      <div className="row rp-header__row">
        <div className="rp-title">{this.props.namespace}/{this.props.name}</div>
        <div className="rp-button">
          <div className="dropdown">
            <button className="btn rp-button__dropdown dropdown-toggle" type="button" data-toggle="dropdown">
              <span className="rp-button__text">
                Run with <span className="rp-button__text--bold">Docker</span>
              </span>
              <span className="caret"></span>
            </button>
            <ul className="dropdown-menu">
              <li><a href="#">Squashed Docker Image</a></li>
              <li><a href="#">Rocket Fetch</a></li>
              <li><a href="#">Basic Docker Pull</a></li>
            </ul>
          </div>
        </div>        
      </div>      
    );
  }
}

export default repoHeader;