import React, { forwardRef } from 'react';
import { classes, st } from './ScrollableContent.st.css.js';

export interface ScrollableContentProps {
  overflowY?: boolean;
  overflowX?: boolean;
  smooth?: boolean;
  children?: React.ReactNode;
  dataHook?: string;
}

export const ScrollableContent = forwardRef<
  HTMLDivElement,
  ScrollableContentProps
>((props, ref) => {
  const { dataHook, overflowX, overflowY, smooth, children } = props;

  return (
    <div
      data-hook={dataHook}
      ref={ref}
      className={st(classes.root, {
        overflowX,
        overflowY,
        smooth,
      })}
    >
      {children}
    </div>
  );
});