/* eslint-disable react/forbid-prop-types */
/* eslint-disable arrow-body-style */
import React from 'react';
import PropTypes from 'prop-types';

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

const Slide = ({
  item = {},
  imageSizes = { width: null, height: 930 },
  slideTitle = '',
  hideCaptions = false,
}) => {
  return (
    <>
      {item.title && !hideCaptions && <span className={styles.title || ''}>{item.title}</span>}
      {item.image && (
        <LazyImage
          className={styles.image || ''}
          src={imagePrettyUrl(item.image, imageSizes.width, imageSizes.height)}
          alt={getAltText(item?.image_object, item.title || slideTitle)}
        />
      )}
      {item.content && <p className={styles.content || ''}>{item.content}</p>}
      {item.label && <span className={styles.label}>{item.label}</span>}
    </>
  );
};

Slide.propTypes = {
  item: PropTypes.shape({
    title: PropTypes.string,
    img: PropTypes.string,
    content: PropTypes.any,
    primary_action: PropTypes.string,
    secondary_action: PropTypes.string,
    label: PropTypes.string,
  }),
  primaryBtnText: PropTypes.string,
  secondaryBtnText: PropTypes.string,
  hideCaptions: PropTypes.bool,
  imageSizes: PropTypes.shape({ width: PropTypes.any, height: PropTypes.any }),
  slideTitle: PropTypes.string,
};

export default Slide;
