import * as React from "react"

import { cn } from "@/lib/utils"

export type ScrollBoxProps = React.ComponentProps<"div"> & {
  orientation?: "vertical" | "horizontal" | "both"
  viewportClassName?: string
}

function ScrollBox({ orientation = "vertical", className, viewportClassName, children, ...props }: ScrollBoxProps) {
  return (
    <div
      data-slot="scroll-box"
      data-orientation={orientation}
      className={cn(
        "relative overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-card-bg,var(--card))]",
        className
      )}
      {...props}
    >
      <div
        data-slot="scroll-box-viewport"
        className={cn(
          "max-h-full min-h-0 min-w-0 overscroll-contain",
          orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
          orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
          orientation === "both" && "overflow-auto",
          viewportClassName
        )}
      >
        {children}
      </div>
    </div>
  )
}

export { ScrollBox }