import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-core-theme/src/hooks/link';
import VerifiedAuthor from '../../../../images/icons/verified-author';
import styles from './template-one.module.scss';

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

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

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

export default AuthorTemplateOne;
