/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';
import LazyImage from '~hooks/lazy-image';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import styles from './portrait.module.scss';

export default function Portrait({ className = '', author, width = 180, height = 180 }) {
  return (
    author.image_object && (
      <LazyImage
        src={imagePrettyUrl(author.image_object.filename, width, height)}
        alt={getAltText(author.image_object, author.image_alt || author.name)}
        loading="eager"
        className={`${className} ${styles.portrait}`}
        width={width}
        height={height}
      />
    )
  );
}

Portrait.propTypes = {
  className: PropTypes.string,
  author: PropTypes.shape({
    name: PropTypes.string,
    image_alt: PropTypes.string,
    profile_page_path: PropTypes.string,
    image_object: PropTypes.shape({
      filename: PropTypes.string,
    }),
  }),
  width: PropTypes.number,
  height: PropTypes.number,
};
