import { useRef, useEffect } from 'react';
import ScrollArea from "../../../structure/ScrollArea/index.js";
import classes from './styles.module.scss';
const MobilePanning = function MobilePanning(props) {
  const {
    layout,
    contestLevel,
    children
  } = props;
  const ref = useRef();
  useEffect(() => {
    const scroll = () => {
      if (!ref.current) return;
      ref.current.scroll({
        left: ref.current.scrollWidth,
        behavior: 'instant'
      });
    };
    scroll();
    setTimeout(scroll, 800);
  }, [contestLevel]);
  if (layout === 'embed') return children;
  return <div className={classes.stretch}>
      <ScrollArea ref={ref} colorScale="warmgray">
        <div className={classes.panning}>
          {children}
        </div>
      </ScrollArea>
    </div>;
};
export default MobilePanning;