/* eslint-disable react/forbid-prop-types */
import React, { useContext } from 'react';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import PropTypes from 'prop-types';
import Portrait from '../assets/portrait';
import Ribbon from '../assets/ribbon';
import Name from '../assets/name';
import Socials from '../../../../../atoms/author/socials';
import styles from './template-four.module.scss';
import { translate } from '~helpers/getters';

export default function TemplateFour({ author, icons, authorTitle }) {
  const { translations } = useContext(Context) || {};
  const { pages_count: pagesCount, author_title: jobTitle, name, pronouns } = author || null;

  return (
    <div className={styles?.container || ''}>
      <div>
        <div className={styles?.portraitContainer || ''}>
          <Portrait className={styles?.portrait || ''} author={author} />
          <Ribbon
            className={styles?.posts || ''}
            author={author}
            content={`${pagesCount} ${translate(translations, 'posts', 'Posts')}`}
          />
        </div>

        <div>
          <Name
            className={styles?.name || ''}
            name={authorTitle || name}
            icon={icons?.verify}
            pronouns={pronouns || ''}
          />
          {jobTitle && <div className={styles?.title || ''}>{jobTitle}</div>}
          <Socials author={author} />
        </div>
      </div>
    </div>
  );
}

TemplateFour.propTypes = {
  authorTitle: PropTypes.string,
  author: PropTypes.shape({
    name: PropTypes.string,
    author_title: PropTypes.string,
    pages_count: PropTypes.number,
    image_alt: PropTypes.string,
    profile_page_path: PropTypes.string,
    facebook_profile: PropTypes.string,
    instagram_profile: PropTypes.string,
    linkedin_profile: PropTypes.string,
    twitter_profile: PropTypes.string,
    tik_tok: PropTypes.string,
    image_object: PropTypes.shape({
      filename: PropTypes.string,
    }),
  }),
  icons: PropTypes.object,
};
