'use client'

import { useMemo } from 'react'

import styles from './scrollWrapper.module.css'

import useScrollShadows from '@scandic-hotels/common/hooks/useScrollShadows'

export default function ScrollWrapper({
  className,
  children,
}: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>) {
  const { containerRef, showLeftShadow, showRightShadow } =
    useScrollShadows<HTMLDivElement>()

  const classNames = useMemo(() => {
    const cls = [styles.scrollWrapper, className]
    if (showLeftShadow) {
      cls.push(styles.leftShadow)
    }
    if (showRightShadow) {
      cls.push(styles.rightShadow)
    }
    return cls.join(' ')
  }, [showLeftShadow, showRightShadow, className])

  return (
    <div className={classNames}>
      <div className={styles.content} ref={containerRef}>
        {children}
      </div>
    </div>
  )
}