Scrolling Frame Container

import React from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface ScrollingFrameProps {
  children: React.ReactNode;
  size: UDim2;
  scrollDirection?: "X" | "Y" | "XY";
  canvasSize?: UDim2;
}

export function ScrollingFrame({ children, size, scrollDirection = "Y" }: ScrollingFrameProps) {
  const { colors } = useTheme();

  return (
    <scrollingframe
      Size={size}
      CanvasSize={new UDim2(0, 0, 0, 0)}
      ScrollBarThickness={6}
      ScrollBarImageColor3={colors.border}
      BackgroundColor3={colors.bg}
      BorderSizePixel={0}
      ScrollingDirection={scrollDirection}
      AutomaticCanvasSize={scrollDirection}
    >
      <uilistlayout Padding={new UDim(0, 4)} />
      {children}
    </scrollingframe>
  );
}