import React from "react";
import PropTypes from "prop-types";
import styles from "./modules/CaseCard.module.css";
import Avatar from "./Avatar";

export default function CaseCard(props) {
  const study = props.study;

  return (
    <a className={styles.container} href={study.link}>
      <img
        className={`${styles.cover}`}
        src={props.study.cover}
        alt="The one and only bongo cat!"
      />
      <div className={styles.avatarHolder}>
        <Avatar src={study.icon} size={"small"} />
      </div>

      <div className={styles.cardInfo}>
        <b className={styles.title}>{study.title}</b>
        <p className={styles.description}>{study.short_description}</p>
        <b>{study.date}</b>
      </div>
    </a>
  );
}

CaseCard.propTypes = {
  study: PropTypes.object.isRequired,
};