"use client";

import * as SliderPrimitive from "@radix-ui/react-slider";
import * as React from "react";
import { cx, focusRing } from "../lib/utils";

interface OnboardingSliderProps
	extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
	ariaLabelThumb?: string;
}

const OnboardingSlider = React.forwardRef<
	React.ElementRef<typeof SliderPrimitive.Root>,
	OnboardingSliderProps
>(({ className, ariaLabelThumb, ...props }, forwardedRef) => {
	const value = props.value || props.defaultValue;
	return (
		<SliderPrimitive.Root
			ref={forwardedRef}
			className={cx(
				"relative flex cursor-pointer touch-none select-none",
				"data-[orientation='horizontal']:w-full data-[orientation='horizontal']:items-center",
				"data-[orientation='vertical']:h-full data-[orientation='vertical']:w-fit data-[orientation='vertical']:justify-center",
				"data-disabled:pointer-events-none",
				className,
			)}
			{...props}
		>
			<SliderPrimitive.Track
				className={cx(
					"relative grow overflow-hidden rounded-full bg-muted",
					"data-[orientation='horizontal']:h-1.5 data-[orientation='horizontal']:w-full",
					"data-[orientation='vertical']:h-full data-[orientation='vertical']:w-1.5",
				)}
			>
				<SliderPrimitive.Range
					className={cx(
						"absolute rounded-full bg-primary",
						"data-[orientation='horizontal']:h-full",
						"data-[orientation='vertical']:w-full",
						"data-disabled:bg-muted-foreground",
					)}
				/>
			</SliderPrimitive.Track>
			{value?.map((_, index) => (
				<SliderPrimitive.Thumb
					key={index}
					className={cx(
						"block size-[17px] shrink-0 rounded-full border transition-all",
						// Light mode: white with primary border, Dark mode: same
						"border-primary",
						"bg-background",
						"shadow-md",
						// Hover state
						"hover:ring-3 hover:ring-primary/20",
						// Active/dragging state
						"active:scale-105 active:ring-3 active:ring-primary/30",
						// Disabled state
						"data-disabled:pointer-events-none data-disabled:bg-muted data-disabled:border-muted-foreground",
						focusRing,
						"outline-offset-0",
					)}
					aria-label={ariaLabelThumb}
				/>
			))}
		</SliderPrimitive.Root>
	);
});

OnboardingSlider.displayName = SliderPrimitive.Root.displayName;

export { OnboardingSlider };