import React from 'react';
import PropTypes from 'prop-types';
import Image from 'next/image';

import { videoPropTypes } from '../../constants';

import { getFileUrlByDimensions } from '../../helpers';

import { Stack, Typography } from '@/mui/components';

import styles from './Slide.module.scss';

function Slide(props) {
  return (
    <Stack direction="column" spacing={2}>
      <Image
        src={getFileUrlByDimensions(props.video.images, props.width, props.height)}
        width={props.width}
        height={props.height}
        alt="Video Thumbnail"
        className={styles.Image}
      />
      <Typography
        title={props.video.title}
        rows={props.isSmallScreen ? 1 : 2}
        variant="caption"
        className={styles.Title}
      >
        {props.video.title}
      </Typography>
    </Stack>
  );
}

Slide.propTypes = {
  video: videoPropTypes.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  isSmallScreen: PropTypes.bool.isRequired,
};

export default Slide;
