import * as React from "react"
import { cn } from "./utils"
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"

function ScrollArea({
 className,
 children,
 ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
 return (
 <ScrollAreaPrimitive.Root
 data-slot="scroll-area"
 className={cn("relative", className)}
 {...props}
 >
 <ScrollAreaPrimitive.Viewport
 data-slot="scroll-area-viewport"
 className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
 >
 {children}
 </ScrollAreaPrimitive.Viewport>
 <ScrollBar />
 <ScrollAreaPrimitive.Corner />
 </ScrollAreaPrimitive.Root>
 )
}

function ScrollBar({
 className,
 orientation = "vertical",
 ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
 return (
 <ScrollAreaPrimitive.ScrollAreaScrollbar
 data-slot="scroll-area-scrollbar"
 orientation={orientation}
 className={cn(
 "flex touch-none p-px transition-colors select-none",
 orientation === "vertical" &&
 "h-full w-2.5 border-l border-l-transparent",
 orientation === "horizontal" &&
 "h-2.5 flex-col border-t border-t-transparent",
 className
 )}
 {...props}
 >
 <ScrollAreaPrimitive.ScrollAreaThumb
 data-slot="scroll-area-thumb"
 className="relative flex-1 rounded-full bg-border"
 />
 </ScrollAreaPrimitive.ScrollAreaScrollbar>
 )
}

export { ScrollArea, ScrollBar }