import React from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import Link from 'gatsby-core-theme/src/hooks/link';
import VerifiedAuthor from '../../../../images/icons/verified-author';
import styles from './template-two.module.scss';

const AuthorTemplateTwo = ({
  authorName,
  authorPath,
  authorImage,
  showLinks = true,
  verify = <VerifiedAuthor />,
  width = 21,
  height = 21,
  imageLoading = 'eager',
}) => (
  <span className={styles.authorImage}>
    {showLinks ? (
      <Link to={authorPath}>
        <LazyImage
          src={imagePrettyUrl(authorImage, width, height)}
          width={width}
          height={height}
          alt={authorName}
          loading={imageLoading}
        />
        {verify}
      </Link>
    ) : (
      <>
        <LazyImage
          src={imagePrettyUrl(authorImage, width, height)}
          width={width}
          height={height}
          alt={authorName}
        />
        {verify}
      </>
    )}
  </span>
);

AuthorTemplateTwo.propTypes = {
  authorName: PropTypes.string,
  authorPath: PropTypes.string,
  authorImage: PropTypes.string,
  verify: PropTypes.element,
  showLinks: PropTypes.bool,
  width: PropTypes.number,
  height: PropTypes.number,
  imageLoading: PropTypes.string,
};

export default AuthorTemplateTwo;
