import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { ChevronLeftRounded, ChevronRightRounded } from '@mui/icons-material';

import { IconButton } from '@/mui/components';

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

function Arrow({ isNext = false, ...props }) {
  return (
    <IconButton
      variant="text"
      shape="square"
      color="inherit"
      size="small"
      onClick={props.onClick}
      className={classNames(styles.Button, {
        [styles.Button___prev]: !isNext,
        [styles.Button___next]: isNext,
      })}
      style={{ top: props.top }}
    >
      {isNext ? <ChevronRightRounded fontSize="xLarge" /> : <ChevronLeftRounded fontSize="xLarge" />}
    </IconButton>
  );
}

Arrow.propTypes = {
  onClick: PropTypes.func.isRequired,
  isNext: PropTypes.bool,
  top: PropTypes.number.isRequired,
};

export default Arrow;
