/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters.mjs';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Author from 'gatsby-core-theme/src/components/atoms/author';

import Link from '~hooks/link';
import styles from './default-card.module.scss';
import defaultCard from '../../../../../static/images/default-card.jpg';

// Test for this component is included in cards organism test
const Card = ({ item }) => {
  const { translations } = useContext(Context) || {};
  return (
    <div className={styles.container}>
      <Link to={item.path} title={item.title}>
        <LazyImage src={item?.banner ? imagePrettyUrl(item?.banner) : defaultCard} />
        <h2>{item.title}</h2>
      </Link>

      <Author
        authorImg={item?.author?.image}
        name={item?.author?.name}
        prefix={translate(translations, 'by', 'By')}
        date={item?.updated_at}
        isCardsAuthor
      />
    </div>
  );
};

Card.propTypes = {
  item: PropTypes.shape({ title: PropTypes.string, path: PropTypes.string }).isRequired,
};

export default Card;
