import React, { useContext } from 'react';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import Link from 'gatsby-core-theme/src/hooks/link';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import PropTypes from 'prop-types';
import LazyImage from '~hooks/lazy-image';
import Socials from '../../../author/socials';
import styles from './template-one.module.scss';
import { imagePrettyUrl, getAltText, translate, textWordsLimit } from '~helpers/getters';

export default function TemplateOne({ item }) {
  const author = item.relation;
  const { translations } = useContext(Context);

  return (
    <div className={styles?.container || ''}>
      <span className={styles?.posts || ''}>
        {author.pages_count} {translate(translations, 'posts', 'Posts')}
      </span>
      <LazyImage
        src={imagePrettyUrl(author.image_object.filename, 72, 72)}
        alt={getAltText(author.image_object, author.image_alt || author.name)}
        width={72}
        height={72}
      />
      <span className={styles?.title || ''}>{author.author_title}</span>
      <span className={styles?.name || ''}>{author.name}</span>
      <Socials className={styles?.socials || ''} author={author} />
      <div
        className={styles?.bio || ''}
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: textWordsLimit(author.biography, 20) }}
      />
      <Link className={styles?.readMore || ''} to={author.profile_page_path}>
        {translate(translations, 'read_more', 'Read More')}{' '}
        <FaArrowRight size="1.4rem" title="Right-pointing Arrow Icon" />
      </Link>
    </div>
  );
}

TemplateOne.propTypes = {
  item: PropTypes.shape({
    relation: PropTypes.shape({
      author_title: PropTypes.string,
      name: PropTypes.string,
      profile_page_path: PropTypes.string,
      biography: PropTypes.string,
      pages_count: PropTypes.string,
      image_alt: PropTypes.string,
      image_object: PropTypes.shape({
        filename: PropTypes.string,
        image_alt: PropTypes.string,
      }),
    }),
  }),
};
