web/packages/common/hooks/useScrollShadows.ts

import { useEffect, useRef, useState } from "react"

export default function useScrollShadows<T extends HTMLElement>() {
  const containerRef = useRef<T>(null)
  const [showLeftShadow, setShowLeftShadow] = useState<boolean>(false)
  const [showRightShadow, setShowRightShadow] = useState<boolean>(false)

  useEffect(() => {
    const handleScroll = () => {
      const container = containerRef.current
      if (!container) return

      setShowLeftShadow(container.scrollLeft > 0)
      setShowRightShadow(
        container.scrollLeft < container.scrollWidth - container.clientWidth
      )
    }

    const container = containerRef.current
    if (container) {
      container.addEventListener("scroll", handleScroll)
    }

    handleScroll()

    return () => {
      if (container) {
        container.removeEventListener("scroll", handleScroll)
      }
    }
  }, [])

  return { containerRef, showLeftShadow, showRightShadow }
}