import styles from './SingleImageContainer.module.scss';
import { SingleImageContainerFormat as SingleImageContainerFormatI } from '../../models/common';
import Image from '../Image';
import Video from '../Video';

export type Props = SingleImageContainerFormatI;

const SingleImageContainer = (props: Props): JSX.Element => {
  const { image, size, isParallaxImage } = props;

  return (
    <div className={`${styles.imageContainer} ${styles[size]}`}>
      <div className={`${styles.content}`}>
        {image && image.type !== 'video' ? (
          <Image
            alt={image?.alt || ''}
            image={image}
            isParralaxImg={isParallaxImage}
            parallaxRange={[-80, 80]}
          />
        ) : image?.src ? (
          <Video
            video={{ src: image?.src || '', alt: '' }}
            className={styles.noPadding}
          />
        ) : null}
      </div>
    </div>
  );
};

export default SingleImageContainer;