"use client"

import * as React from "react"

type ScrollAreaProps = React.ComponentPropsWithoutRef<"div"> & {
  orientation?: "vertical" | "horizontal" | "both"
}

const orientationClasses: Record<NonNullable<ScrollAreaProps["orientation"]>, string> = {
  vertical: "overflow-y-auto",
  horizontal: "overflow-x-auto",
  both: "overflow-auto",
}

const baseClasses =
  "relative [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-track]:bg-transparent"

const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
  ({ className, orientation = "vertical", children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={[baseClasses, orientationClasses[orientation], className].filter(Boolean).join(" ")}
        {...props}
      >
        {children}
      </div>
    )
  }
)
ScrollArea.displayName = "ScrollArea"

export { ScrollArea }
