import React from 'react';
import PropTypes from 'prop-types';

import useTranslate from '~hooks/useTranslate/useTranslate';
import Contributor from './contributor';
import styles from './multiple-contributors.module.scss';

const MultipleContributors = ({
  authors,
  reviewer,
  content = (
    <div className={styles.content}>
      As well as the experience of working within the gambling industry all our contributors are
      casino players themselves. You can read more about our writers and our editorial policy on our{' '}
      <a href="/">Meet the Experts page</a> and find out more about Gatsby on our{' '}
      <a href="/">About Us page</a>
    </div>
  ),
  showAuthorTitle = true,
  showReviewerTitle = false,
  showVerification = true,
  page,
}) => {
  const { path } = page || {};

  return (
    <div className={styles.parentContainer || ''}>
      <div className={styles.container || ''}>
        <h2 className={styles.heading || ''}>
          {useTranslate(
            `${path}_multiple_contributors_heading`,
            'Who Created, Edited & Fact Checked The Content On This Page?'
          )}
        </h2>
        <div className={styles.contributorsContainer || ''}>
          <h3 className={styles.contributorsTitle || ''}>
            {useTranslate(`${path}_multiple_contributors_title`, 'Team of Casino Experts')}
          </h3>
          <p className={styles.contributorsDescription || ''}>
            {useTranslate(
              'multiple_contributors_desc',
              'The content around our reviews including the editorial content on this page has been created by an experienced team of casino players. Here is a bit more about them, what they look for in a top casino site and their current favourite sites for their own betting. '
            )}
          </p>
          <div className={styles.authors || ''}>
            {authors?.map((author) => (
              <Contributor contributor={author} showTitle={showAuthorTitle} />
            ))}
            {reviewer && (
              <Contributor
                contributor={reviewer}
                isReviewer
                showTitle={showReviewerTitle}
                showVerification={showVerification}
              />
            )}
          </div>
          {content && <div className={styles?.contributorsMiniDescription || ''}>{content}</div>}
        </div>
      </div>
    </div>
  );
};

MultipleContributors.propTypes = {
  authors: PropTypes.shape([]).isRequired,
  reviewer: PropTypes.shape({}),
  content: PropTypes.element,
  showAuthorTitle: PropTypes.bool,
  showReviewerTitle: PropTypes.bool,
  showVerification: PropTypes.bool,
  page: PropTypes.shape({
    path: PropTypes.string,
  }),
};

export default MultipleContributors;
