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

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

  return (
    <div className={styles.container}>
      <LazyImage
        src={imagePrettyUrl(author.image_object.filename, 80, 80)}
        alt={getAltText(author.image_object, author.image_alt || author.name)}
        width={80}
        height={80}
      />
      <div className={styles.nameContainer}>
        <span className={styles.title}>{author.author_title}</span>
        <Link className={styles.name} to={author.profile_page_path}>
          {author.name}
        </Link>
      </div>
      <span className={styles.posts}>
        {author.pages_count} {translate(translations, 'posts', 'Posts')}
      </span>
      <Socials className={styles.socials} author={author} />
    </div>
  );
}

TemplateTwo.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,
      }),
    }),
  }),
};
