import React from "react";

import Star from "../Images/Star/Star 1.png";

export default function Card(props) {
  const imagePath = require(`../Images/${props.img}`);
  let badgeText;
  if (props.openSpots === 0) {
  badgeText="SOLD OUT";
}
else {
  badgeText="ONLINE"
}
  return (
    <div className="card">
      {badgeText && <div className="card--badge">{badgeText}</div>}
      <img  className="card--image" />
      <div className="card--stats">
        <img  className="card--star" />
        <span>{props.rating}.0</span>
        <span className="gray">({props.reviewCount}) </span>
        <span className="gray">{props.location}</span>
      </div>
      <p className="card--title">{props.title}</p>
      <p>
        <strong>From {props.price}</strong> / person
      </p>
    </div>
  );
}