import React from 'react';
import PropTypes from 'prop-types';
import isSticky from '~hooks/stickyOnScroll';
import styles from './sticky.module.scss';

const Sticky = ({
  position = 'bottom',
  fullWidth = false,
  showOnScroll = true,
  className = '',
  children,
}) => {
  const sticky = isSticky();

  return (
    <div
      className={`${styles.sticky || ''} ${position === 'top' && (styles.top || '')} ${
        !sticky && showOnScroll ? styles.notScrolled : ''
      } ${className || ''}`}
    >
      <div className={!fullWidth ? styles.container : ''}>{children}</div>
    </div>
  );
};

Sticky.propTypes = {
  position: PropTypes.string,
  showOnScroll: PropTypes.bool,
  fullWidth: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any])
    .isRequired,
  className: PropTypes.string,
};

export default Sticky;
