import { FC, PropsWithChildren, useEffect, useRef } from 'react'
import IndianaDragScoll from 'react-indiana-drag-scroll'
import styles from './ScrollContainer.module.css'

export const ScrollContainer: FC<PropsWithChildren> = ({ children }) => {
  const container = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (container.current) {
      container.current.oncontextmenu = e => e.preventDefault()
    }
  }, [])

  return (
    <IndianaDragScoll
      className={styles.container}
      buttons={[2]}
      innerRef={container}
      hideScrollbars={false}
      activationDistance={5}
    >
      <div className={styles.inner}>{children}</div>
    </IndianaDragScoll>
  )
}