import ElectionLink from "../../ElectionLink/index.js";
import cx from "../../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Card = function Card(props) {
  const {
    reporterName,
    comment,
    headshot,
    link
  } = props;
  return <div className={cls('card')}>
      <ElectionLink to={link} className={classes.link}>
        <div className={classes.container}>
          <div className={classes.text}>
            <p className={classes.comment}>
              {comment}
            </p>
          </div>
          <div className={classes.attribution}>
            <img src={headshot} alt={`Headshot of ${reporterName}`} className={classes.headshot} />
            <span className={classes.name}>{reporterName}</span>
          </div>

        </div>
      </ElectionLink>
    </div>;
};
export default Card;