import React, { forwardRef } from 'react'

import { cn } from '../../services/cn'

type ScrollingContainerProps = {
  /** The content to be shown inside the component. */
  children: React.ReactNode
  /** Height of the container */
  height?: number | string
  /** Optionally hide the top and bottom gradients */
  hideGradients?: boolean
  /** Optionally use `position: absolute` instead of `position: sticky` */
  position?: 'absolute' | 'sticky'
  /** Optional prop to add a test id to the ScrollingContainer for QA testing */
  qaTestId?: string
}

const ScrollingContainer = forwardRef<HTMLDivElement, ScrollingContainerProps>(
  (
    {
      children,
      hideGradients,
      height = 300,
      position = 'sticky',
      qaTestId = 'scrolling-container',
    },
    ref,
  ): React.JSX.Element => {
    // Gradient styles for top and bottom overlays
    const gradientClasses = cn(
      'z-10 h-4 w-full bg-white', // Base gradient styles
      // Linear gradient from transparent to white
      'bg-gradient-to-t from-transparent to-white',
      {
        sticky: position === 'sticky',
        absolute: position === 'absolute',
      },
    )

    return (
      <div
        className='relative overflow-y-scroll rounded-b-lg'
        style={{ height }}
        ref={ref}
        qa-test-id={qaTestId}
      >
        {!hideGradients ? (
          <div className={cn(gradientClasses, '-top-px rounded-t')} />
        ) : null}
        <div>{children}</div>
        {!hideGradients ? (
          <div className={cn(gradientClasses, '-bottom-px rotate-x-180')} />
        ) : null}
      </div>
    )
  },
)

ScrollingContainer.displayName = 'ScrollingContainer'
export default ScrollingContainer