var HandToBeat = React.createClass({

  render: function() {
    if (this.props.cards == null || this.props.cards == "") {
      return (
        <div id="play-to-beat">
          <h4>Hand to beat:</h4>
          None
        </div>
      );
    } else {

      return (
        <div id="play-to-beat">
          <h4>Hand to beat:</h4>
          <ol id="cards-to-beat">
          {this.props.cards.map(function(card) {
            return <li key={card.id}>
                {/* TODO: Don't hard code face cards here */}
                {/* <span>{card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2')} {card.suit}</span> */}
                <img 
                  alt={card.rank + ' ' + card.suit}
                  src={('/assets/cards/png/' + card.rank.replace('J','jack').replace('Q','queen').replace('K','king').replace('A','ace') + '_of_' + card.suit.toLowerCase() + 's.png').replace('11','jack').replace('12','queen').replace('13','king').replace('14','ace').replace('15','2')} />
              </li>;})}
          </ol>
        </div>
      );
    }
  }
});