import React from "react";

export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
  orientation?: "vertical" | "horizontal" | "both";
}

export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
  ({ className = "", children, orientation = "vertical", ...props }, ref) => {
    
    let orientationClasses = "overflow-y-auto overflow-x-hidden";
    if (orientation === "horizontal") orientationClasses = "overflow-x-auto overflow-y-hidden";
    if (orientation === "both") orientationClasses = "overflow-auto";

    return (
      <div
        ref={ref}
        className={`relative overflow-hidden ${className}`}
        {...props}
      >
        <div className={`h-full w-full rounded-[inherit] ${orientationClasses} scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent hover:scrollbar-thumb-border/80`}>
          {children}
        </div>
      </div>
    );
  }
);

ScrollArea.displayName = "ScrollArea";