import React from 'react';
import PropTypes from 'prop-types';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import Link from 'gatsby-core-theme/src/hooks/link';
import styles from './template-one.module.scss';

const AuthorTemplateOne = ({
  label = '',
  authorName,
  authorPath,
  showLinks = true,
  verify = '../../../../images/verifiedAuthor.svg',
}) => {
  const author = authorName?.split(/\s+/);

  return (
    author &&
    author.length > 0 && (
      <span className={styles.authorTemplate}>
        {showLinks ? (
          <Link to={authorPath}>
            {`${label} ${`${author[0]} ${author[1]?.slice(0, 1)}.`}`}
            <LazyImage src={verify} alt="verify" width={14} height={14} />
          </Link>
        ) : (
          <>
            {`${label} ${`${author[0]} ${author[1]?.slice(0, 1)}.`}`}
            <LazyImage src={verify} alt="verify" width={14} height={14} />
          </>
        )}
      </span>
    )
  );
};

AuthorTemplateOne.propTypes = {
  label: PropTypes.string,
  authorName: PropTypes.string,
  authorPath: PropTypes.string,
  verify: PropTypes.string,
  showLinks: PropTypes.bool,
};

export default AuthorTemplateOne;
