#content

#content {
  width: 1030px;
  margin: 0 auto;
}
.container {
  width: 1030px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card-container {
  height: 334px;
  width: 334px;
  border: 1px solid #ccc;
  font-family: Helvetica;
  margin-bottom: 10px;
}

.tall-card-container {
  height: 678px;
}

.card-img {
  height: 240px;
  padding-left: 10px;
}

.card-title {
  font-weight: bold;
  line-height: 35px;
  padding-left: 10px;
  font-size: 22px;
}

.card-rating {
  height: 30px;
  background-color: #eee;
  margin-bottom: 10px;
}

.card-tomato {
  height: 20px;
  padding-left: 5px;
}

.card-rating-rotten-tomatoes {
  font-size: 13px;
  font-weight: bold;
  padding-left: 10px
}

.card-rating-liked {
  font-size: 11px;
}

.button-container {
  width: 140px;
  float: right;
  margin-right: 10px;
}

.button {
  display: block;
  line-height: 40px;
  width: 100%;
  margin-bottom: 7px;
  background-color: #ccc;
  border: none;
  font-size: 16px;
  color: #565;
  cursor: pointer;
  text-decoration: none;
}

.time-button {
  text-align: left;
  span {
    padding-left: 10px;
    
  }
}

.buy-tickets-button {
  background-color: #DE1177;
  border: none;
  position: relative;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.buy-tickets-image {
  height: 15px;
  position: absolute;
  left: 5px;
  top: 15px;
}

.more-sessions-button {
  text-align: center; 
}

const cards = [{
  image: "http://www.joblo.com/timthumb.php?src=/posters/images/full/the-martian-poster.jpg&h=600&q=100",
  title: "The Martian",
  rating: 86,
  description: "Mentalist gets trapped on mars and poos on potatoes to survive"
}, {
  image: "http://www.joblo.com/posters/images/full/mortdecai-munn.jpg",
  title: "Mortdecai",
  rating: 70,
  description: "Beautiful women wear convincing moustaches"
}, {
  image: "http://www.joblo.com/timthumb.php?src=/posters/images/full/AVMC_Santa_Vert_Key_Art_US_Main.jpg&h=600&q=100",
  title: "A Very Murray Christmas",
  rating: 100,
  description: "Bill Murray being a total legend"
}, {
  image: "http://www.joblo.com/posters/images/full/blood_father_poster.jpg",
  title: "Blood Father",
  rating: 60
}, {
  image: "http://www.joblo.com/timthumb.php?src=/posters/images/full/lhf-flag-poster-gallery.jpg&h=600&q=100",
  title: "London has Falling",
  rating: 50
}, {
  image: "http://www.joblo.com/timthumb.php?src=/posters/images/full/pride_and_prejudice_and_zombies_poster2.jpg&h=600&q=100",
  title: "Pride and Prejudice Zombies",
  rating: 50
}, {
  image: "http://www.joblo.com/timthumb.php?src=/posters/images/full/the-purge-ey-mposters-02-gallery.jpg&h=600&q=100",
  title: "The Purge",
  rating: 76
}, {
  image: "http://www.joblo.com/timthumb.php?src=/posters/images/full/sausage-party-poster1.jpg&h=600&q=100",
  title: "Sausage Party",
  rating: 99
}, {
  image: "http://www.joblo.com/timthumb.php?src=/posters/images/full/kung-fu-panda-3-poster-full.jpg&h=600&q=100",
  title: "Kung Fu Panda 3",
  rating: 99
}]

function TomatoRating(props) {
  const { rating } = props;
  return (
    <div className="card-rating">
        <img className="card-tomato" src="https://d2a5cgar23scu2.cloudfront.net/static/images/icons/fresh-16.png" />
        <span className="card-rating-rotten-tomatoes">
          ROTTEN TOMATOES SCORE - 
          <span className="card-rating-liked"> {rating}% liked it</span>
        </span>
    </div>
  );
}

function BuyTickets() {
  return (
    <button className="button buy-tickets-button">
      <img className="buy-tickets-image" src="http://www.iconsplace.com/icons/preview/white/ticket-256.png" />
      BUY TICKETS
    </button>
  )
}

function TimeButton(props) {
  const { time, url } = props;
  return (
    <a className="button time-button" href={url}><span>{time}</span></a>
  );
}

function MoreSessions(props) {
  const url = props;
  return (
    <a className="button more-sessions-button" href={url}>More Sessions ></a>
  )
}


function Card(props) {
  const { image, title, rating, description, tallCard } = props;
  const className = tallCard ? "card-container tall-card-container" : "card-container";
  return (
    <div className={className}>
      <div className="card-title">{title}</div>
      
      <TomatoRating rating={rating} /> 
      <img className="card-img" src={image} />
      <div className="button-container">
        <BuyTickets />
        <TimeButton time="6:45pm" /> 
        <TimeButton time="7:45pm" />  
        <TimeButton time="8:45pm" />  
        <MoreSessions url="https://thefix.nine.com.au" />
      </div>
    </div>
  );
}


function Cards() {
  return (
    <div className="container">
      {cards.map(card => Card(card))}
    </div>
  );
}


ReactDOM.render(<Cards />, document.getElementById('content'))