import React from 'react';
import PropTypes from 'prop-types';
import useTranslate from '~hooks/useTranslate/useTranslate';
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 styles from './template-one.module.scss';

export default function TemplateOne({ author, icons, authorTitle }) {
  const {
    pages_count: pagesCount,
    author_title: jobTitle,
    name,
    biography,
    expertise,
    pronouns,
  } = author || null;

  return (
    <div className={styles?.container || ''}>
      <Ribbon
        className={styles?.posts || ''}
        author={author}
        content={`${pagesCount} ${useTranslate('posts', 'Posts')}`}
      />
      <Portrait className={styles?.portrait || ''} author={author} />
      <div>
        {jobTitle && <div className={styles?.title || ''}>{jobTitle}</div>}
        <Name
          className={styles?.name || ''}
          name={authorTitle || name}
          icon={icons?.verify}
          pronouns={pronouns || ''}
        />
        <Socials className={styles?.socials || ''} author={author} />
        {biography && (
          <div
            className={styles?.biography || ''}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{ __html: biography }}
          />
        )}
        <Expertise expertise={expertise} icon={icons?.expertise} />
      </div>
    </div>
  );
}

TemplateOne.propTypes = {
  authorTitle: PropTypes.string,
  author: PropTypes.shape({
    name: PropTypes.string,
    pages_count: PropTypes.number,
    author_title: PropTypes.string,
    biography: PropTypes.string,
    image_alt: PropTypes.string,
    expertise: PropTypes.arrayOf(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.shape({
    verify: PropTypes.element,
    expertise: PropTypes.element,
  }),
};
