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 styles from './author-template.module.scss';

const AuthorTemplateTwo = ({
  authorName,
  authorPath,
  authorImage,
  showLinks = true,
  verify = '../../../../images/verifiedAuthor.svg',
}) => (
  <span className={styles.authorImage}>
    {showLinks ? (
      <Link to={authorPath}>
        <LazyImage
          src={imagePrettyUrl(authorImage, 21, 21)}
          width={21}
          height={21}
          alt={authorName}
        />
        <LazyImage src={verify} alt="verify" width={10} height={10} />
      </Link>
    ) : (
      <>
        <LazyImage
          src={imagePrettyUrl(authorImage, 21, 21)}
          width={21}
          height={21}
          alt={authorName}
        />
        <LazyImage src={verify} alt="verify" width={10} height={10} />
      </>
    )}
  </span>
);

AuthorTemplateTwo.propTypes = {
  authorName: PropTypes.string,
  authorPath: PropTypes.string,
  authorImage: PropTypes.string,
  verify: PropTypes.string,
  showLinks: PropTypes.bool,
};

export default AuthorTemplateTwo;
