/* 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 Name from '../assets/name';
import Socials from '../../../../../atoms/author/socials';
import Expertise from '../assets/expertise';
import Ribbon from '../assets/ribbon';
import { translate } from '~helpers/getters';
import styles from './template-two.module.scss';

export default function TemplateTwo({ author, icons, authorTitle }) {
  const { translations } = useContext(Context);
  return (
    <div className={styles?.container || ''}>
      <Ribbon
        className={styles?.posts || ''}
        author={author}
        content={`${author.pages_count} ${translate(translations, 'posts', 'Posts')}`}
      />
      <div>
        <Portrait className={styles?.portrait || ''} author={author} />
        <div>
          <div className={styles?.title || ''}>{author.author_title}</div>
          <Name
            className={styles?.name || ''}
            name={authorTitle || author.name}
            icon={icons?.verify}
          />
          <Socials className={styles?.socials || ''} author={author} />
          <Expertise expertise={author?.expertise || ''} icon={icons?.expertise} />
        </div>
      </div>
    </div>
  );
}

TemplateTwo.propTypes = {
  authorTitle: PropTypes.string,
  author: PropTypes.shape({
    name: PropTypes.string,
    pages_count: PropTypes.number,
    author_title: PropTypes.string,
    image_alt: PropTypes.string,
    expertise: PropTypes.array,
    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,
};
