import React from 'react';
import PropTypes from 'prop-types';
import { IoIosArrowBack } from '@react-icons/all-files/io/IoIosArrowBack';
import { IoIosArrowForward } from '@react-icons/all-files/io/IoIosArrowForward';
import styles from './buttons.module.scss';

const Buttons = ({ scrollX, noModuleIntro, scrollEnd, scroll }) => (
  <>
    <button
      className={`${styles.buttLeft} ${noModuleIntro ? styles.nointroButtLeft : ''} ${
        scrollX <= 0 ? styles.disabled : ''
      }`}
      onClick={() => scroll(-200)}
      type="button"
    >
      <IoIosArrowBack />
    </button>
    <button
      className={`${styles.buttRight} ${noModuleIntro ? styles.nointroButtRight : ''} ${
        !scrollEnd ? '' : styles.disabled
      }`}
      onClick={() => scroll(200)}
      type="button"
    >
      <IoIosArrowForward />
    </button>
  </>
);

Buttons.propTypes = {
  scrollX: PropTypes.number,
  noModuleIntro: PropTypes.bool,
  scrollEnd: PropTypes.bool,
  scroll: PropTypes.func,
};

export default Buttons;
