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 useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './buttons.module.scss';

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

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

export default Buttons;
