const Card = ({ heading, description, imageSrc }) => {
  return (
    <div className="card">
      {imageSrc && <img src={imageSrc} />}
      <h1 className="card-heading">{heading}</h1>
      <p className="card-description">{description}</p>
    </div>
  );
};

Card.propTypes = {
  heading: PropTypes.string.isRequired,
  description: PropTypes.description.isRequired,
  imageSrc: PropTypes.string,
};

const Card = ({ heading, description, imageSrc, imageAlt }) => {
  return (
    <div className="card">
      {imageSrc && <img src={imageSrc} alt={imageAlt} />}
      <h1 className="card-heading">{heading}</h1>
      <p className="card-description">{description}</p>
    </div>
  );
};

Card.propTypes = {
  heading: PropTypes.string.isRequired,
  description: PropTypes.description.isRequired,
  imageSrc: PropTypes.string,
  imageAlt: PropTypes.string,
};

const Card = ({ heading, description, imageSrc, imageAlt }) => {
  return (
    <div className="card">
      {imageSrc && <img src={imageSrc} alt={imageAlt} />}
      <h1 className="card-heading">{heading}</h1>
      <p className="card-description">{description}</p>
    </div>
  );
};

Card.propTypes = {
  heading: PropTypes.string.isRequired,
  description: PropTypes.description.isRequired,
  imageSrc: PropTypes.string,
  imageAlt: PropTypes.string,
};