/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable camelcase */
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-core-theme/src/hooks/link';
import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
import VariableComponent from '../variables';

import styles from './article-card.module.scss';

const ArticleCard = ({
  item,
  width = 360,
  height = 240,
  hasVariableComponent = true,
  showDate = true,
  showAuthorOnOneLine = false,
  showAuthorAsLink = false,
  readingTime = false,
  verifyIcon = '',
}) => {
  const { title, path, banner, reading_time } = item;
  return (
    <div className={styles.article || ''}>
      <Link
        to={path}
        className={`${styles.image || ''} article-card-gtm`}
        aria-label={`${title} Link`}
      >
        {banner ? (
          <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
        ) : (
          <GatsbyImg
            alt={title}
            width="100%"
            height="100%"
            loading="lazy"
            filename="default-article.jpg"
          />
        )}
      </Link>
      <div className={`${styles?.cardContent || ''}`}>
        {hasVariableComponent && (
          <VariableComponent
            item={item}
            showDate={showDate}
            showAuthorOnOneLine={showAuthorOnOneLine}
            showAuthorAsLink={showAuthorAsLink}
            readingTime={readingTime ? reading_time : false}
            verifyIcon={verifyIcon}
          />
        )}
      </div>
    </div>
  );
};

ArticleCard.propTypes = {
  item: PropTypes.shape({
    author: PropTypes.shape({
      name: PropTypes.string,
      profile_page_path: PropTypes.string,
      twitter_profile: PropTypes.string,
      image: PropTypes.string,
    }),
    title: PropTypes.string,
    updated_at: PropTypes.string,
    created_at: PropTypes.string,
    path: PropTypes.string,
    banner: PropTypes.string,
    reading_time: PropTypes.string,
  }).isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
  hasVariableComponent: PropTypes.bool,
  showAuthorOnOneLine: PropTypes.bool,
  showDate: PropTypes.bool,
  showAuthorAsLink: PropTypes.bool,
  readingTime: PropTypes.bool,
  verifyIcon: PropTypes.string,
};

export default ArticleCard;
