"use client"

import { useMemo } from "react"

import useScrollShadows from "@/hooks/useScrollShadows"

import { ScrollWrapperProps } from "./scrollWrapper"

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

export default function ScrollWrapper({
  className,
  children,
}: ScrollWrapperProps) {
  const { containerRef, showLeftShadow, showRightShadow } = useScrollShadows()

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