/**
 * JTZL_WebIRC_Chat - ScrollArea Component
 *
 * @package   JTZL_WebIRC_Chat
 * @copyright Copyright (c) 2025, JT. G.
 * @license   GPL-3.0+
 * @since     3.0.0
 */

'use client';

import * as React from 'react';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { cn } from '../../lib/utils';

/**
 * ScrollArea component for scrollable content areas, particularly useful for message lists.
 * Using native scrolling for reliability.
 *
 * @since 3.0.0
 *
 * @return JSX.Element - Rendered scroll area component
 */
const ScrollArea = React.forwardRef<
	HTMLDivElement,
	React.ComponentProps<'div'>
>(({ className, children, ...props }, ref) => {
	return (
		<div
			ref={ref}
			data-slot="scroll-area-viewport"
			className={cn(
				'overflow-auto focus-visible:ring-ring/50 rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1',
				className
			)}
			{...props}
		>
			{children}
		</div>
	);
});

ScrollArea.displayName = 'ScrollArea';

/**
 * ScrollBar component for custom scrollbar styling.
 *
 * @since 3.0.0
 *
 * @return JSX.Element - Rendered scrollbar component
 */
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 z-10',
				orientation === 'vertical' &&
					'h-full w-2.5 border-l border-l-transparent',
				orientation === 'horizontal' &&
					'h-2.5 w-full flex-col border-t border-t-transparent',
				className
			)}
			{...props}
		>
			<ScrollAreaPrimitive.ScrollAreaThumb
				data-slot="scroll-area-thumb"
				className="bg-border hover:bg-border/80 relative flex-1 rounded-full transition-colors"
			/>
		</ScrollAreaPrimitive.ScrollAreaScrollbar>
	);
}

export { ScrollArea, ScrollBar };