import React from 'react';
import Link from 'gatsby-core-theme/src/hooks/link';
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-two.module.scss';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';

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

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

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