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


export default function TemplateOne({ item, width = 72, height = 72 }) {
  const author = item?.relation;

  return (
    <div className={styles?.container || ''}>
      <span className={styles?.posts || ''}>
        {author?.pages_count} {useTranslate('posts', 'Posts')}
      </span>
      <LazyImage
        src={imagePrettyUrl(author?.image_object?.filename, width, height)}
        alt={getAltText(author?.image_object, author?.image_alt || author?.name)}
        width={width}
        height={height}
      />
      <span className={styles?.title || ''}>{author?.author_title}</span>
      <span className={styles?.name || ''}>{author?.name}</span>
      {author && <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={item?.path}>
        {useTranslate('read_more_author', 'View Author')}{' '}
        <FaArrowRight size="1.4rem" title="Right-pointing Arrow Icon" />
      </Link>
    </div>
  );
}

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