/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable camelcase */
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 './author-card.module.scss';

const AuthorCard = ({ author, width = 60, height = 60 }) => {
  const { name, author_title, email_address, image, image_alt, image_object } = author || {};

  return (
    <div className={styles.authorCard || ''}>
      <div className={styles.img || ''}>
        <LazyImage
          src={imagePrettyUrl(image, width, height)}
          alt={getAltText(image_object, image_alt || name)}
          width={width}
          height={height}
        />
      </div>
      <div className={styles.txt || ''}>
        <div className={styles.name || ''}>{name}</div>
        <div className={styles.position || ''}>{author_title}</div>
        <a
          className={styles.email || ''}
          href={`mailto:${email_address}`}
          target="_blank"
          rel="nofollow noreferrer"
        >
          {email_address}
        </a>
      </div>
    </div>
  );
};

AuthorCard.propTypes = {
  author: PropTypes.shape({
    name: PropTypes.string,
    author_title: PropTypes.string,
    email_address: PropTypes.string,
    image: PropTypes.string,
  }).isRequired,
  width: PropTypes.number,
  height: PropTypes.number,
};

export default AuthorCard;
