Scroll region

"use client";

import { type ComponentProps } from "react";
import { cn } from "../lib/cn";
import { ScrollArea, ScrollBar } from "./scroll-area";

export interface ScrollRegionProps extends ComponentProps<typeof ScrollArea> {
  orientation?: "vertical" | "horizontal" | "both";
  label: string;
}

/** DesignX scroll-region — shadcn ScrollArea with a required accessible name. */
export function ScrollRegion({
  className,
  orientation = "vertical",
  label,
  children,
  ...props
}: ScrollRegionProps) {
  return (
    <ScrollArea
      data-slot="scroll-region"
      aria-label={label}
      className={cn(className)}
      {...props}
    >
      {children}
      {orientation === "horizontal" || orientation === "both" ? (
        <ScrollBar orientation="horizontal" />
      ) : null}
    </ScrollArea>
  );
}