import React from 'react';
import PropTypes from 'prop-types';
import { FaAngleRight } from '@react-icons/all-files/fa/FaAngleRight';
import styles from './see-more.module.scss';
import Link from '~hooks/link';

export default function SeeMore({
  module,
  viewMoreIcon = <FaAngleRight title="Right-pointing Arrow Icon" />,
  showMoreLink = true,
}) {
  return (
    <>
      {module.see_more_link?.value && module.see_more_link.type === 'page' && showMoreLink && (
        <Link
          to={module.see_more_link?.path}
          className={`${styles.viewMore || ''} module-title-gtm`}
        >
          {module.see_more_link?.title}
          {viewMoreIcon}
        </Link>
      )}
      {module.see_more_link?.value && module.see_more_link.type === 'external' && showMoreLink && (
        <a
          href={module.see_more_link?.path}
          rel="nofollow"
          className={`${styles.viewMore || ''} module-title-gtm`}
        >
          {module.see_more_link?.title}
          {viewMoreIcon}
        </a>
      )}
    </>
  );
}

SeeMore.propTypes = {
  module: PropTypes.shape({
    see_more_link: PropTypes.shape({
      path: PropTypes.string,
      value: PropTypes.number,
      title: PropTypes.string,
      type: PropTypes.string,
    }),
  }),
  viewMoreIcon: PropTypes.element,
  showMoreLink: PropTypes.bool,
};
