"use client"

import * as React from "react"
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"

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

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 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"
 data-orientation={orientation}
 orientation={orientation}
 className={cn(
 "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
 className
 )}
 {...props}
 >
 <ScrollAreaPrimitive.ScrollAreaThumb
 data-slot="scroll-area-thumb"
 className="relative flex-1 bg-border"
 />
 </ScrollAreaPrimitive.ScrollAreaScrollbar>
 )
}

export { ScrollArea, ScrollBar }
