import {
  OverlayScrollbarsComponent,
  OverlayScrollbarsComponentProps,
} from "overlayscrollbars-react";

/**
 * @desc 创建漂亮的滚动条，包裹一些可能溢出的元素。
 * @why chrome在113之后，取消了overflow: overlay的支持，所以需要使用overlayScrollbars来实现。
 */
export const ScrollableArea: React.FC<
  React.PropsWithChildren<{
    scrollProps?: OverlayScrollbarsComponentProps;
    elementProps?: React.HTMLAttributes<HTMLElement>;
    className?: string;
    style?: React.CSSProperties;
  }>
> = ({ scrollProps = {}, elementProps, className, style, children }) => {
  const { options = {}, ...rest } = scrollProps;
  scrollProps;
  return (
    <OverlayScrollbarsComponent
      options={{
        scrollbars: {
          autoHide: "scroll",
          theme: "os-theme-light",
        },
        overflow: {
          x: "hidden",
          y: "scroll",
        },
        ...options,
      }}
      defer
      style={{
        height: "100%",
      }}
      {...rest}
    >
      <div className={className} style={style} {...elementProps}>
        {children}
      </div>
    </OverlayScrollbarsComponent>
  );
};
