import React from 'react';
import PropTypes from 'prop-types';

import LazyImage from '~hooks/lazy-image';
import { imagePrettyUrl } from '~helpers/getters';
import styles from './image.module.scss';

const Image = ({ module = {} }) => {
  const { title, value, alt = 'missing alt', alignment } = module;

  if (!value) return <></>;

  return (
    <LazyImage
      src={imagePrettyUrl(value, 912, 333)}
      alt={alt || 'missing alt'}
      width={912}
      height={333}
      title={title && title}
      className={`${styles.imageModule || ''} ${styles[alignment] || ''}`}
    />
  );
};

Image.propTypes = {
  module: PropTypes.shape({
    title: PropTypes.string,
    value: PropTypes.string,
    alt: PropTypes.string,
    alignment: PropTypes.string,
  }),
};

export default Image;
