import { forwardRef } from "react";
import {
  StyledCorner,
  StyledRoot,
  StyledScrollbar,
  StyledThumb,
  StyledViewport,
} from "./scroll-area.styled";

interface ScrollAreaProps extends React.ComponentProps<typeof StyledRoot> {
  children: React.ReactNode;
  viewportProps?: React.ComponentProps<typeof StyledViewport>;
  scrollbarProps?: Omit<React.ComponentProps<typeof StyledScrollbar>, "orientation">;
  thumbProps?: React.ComponentProps<typeof StyledThumb>;
  cornerProps?: React.ComponentProps<typeof StyledCorner>;
}

export const ScrollArea: React.FC<ScrollAreaProps> = forwardRef<HTMLDivElement, ScrollAreaProps>(
  ({ children, viewportProps, scrollbarProps, thumbProps, cornerProps, ...rootProps }, ref) => {
    return (
      <StyledRoot {...rootProps}>
        <StyledViewport {...viewportProps} ref={ref}>
          {children}
        </StyledViewport>
        <StyledScrollbar {...scrollbarProps} orientation="vertical">
          <StyledThumb {...thumbProps} />
        </StyledScrollbar>
        <StyledScrollbar {...scrollbarProps} orientation="horizontal">
          <StyledThumb {...thumbProps} />
        </StyledScrollbar>
        <StyledCorner {...cornerProps} />
      </StyledRoot>
    );
  }
);

ScrollArea.displayName = "ScrollArea";