"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>
  )
}