import React from 'react';
import PropTypes from 'prop-types';
import styles from './author-box.module.scss';
import AuthorDetails from '../details';
import AuthorDescription from '../description';
import FactCheck from './fact-check';
import Expertion from './expertion';

export default function AuthorBox({ author, reviewer = {}, readingTime = '', date = '' }) {
  return (
    <div className={styles.container || ''} id="authorbox">
      {author?.ribbon_label && <div className={styles.ribbon || ''}>{author?.ribbon_label}</div>}
      <AuthorDetails author={author} template="templateThree" />
      <AuthorDescription author={author} />
      <Expertion expertise={author?.expertise} />
      <FactCheck author={author} reviewer={reviewer} readingTime={readingTime} date={date} />
    </div>
  );
}

AuthorBox.propTypes = {
  author: PropTypes.shape({
    ribbon_label: PropTypes.string,
    expertise: PropTypes.shape({}),
  }),
  reviewer: PropTypes.string,
  readingTime: PropTypes.string,
  date: PropTypes.string,
};
