import React from 'react';
import * as SwitchPrimitive from '@radix-ui/react-switch';
import { cn } from '../../lib/utils.js';

export function UISwitch( { className, ...props } ) {
	return (
		<SwitchPrimitive.Root
			className={ cn(
				'arrayfunnel-switch peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent transition-colors',
				'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-arrayfunnel-primary/20',
				'disabled:cursor-not-allowed disabled:opacity-50',
				'data-[state=checked]:bg-arrayfunnel-primary data-[state=unchecked]:bg-[#ccc]',
				className
			) }
			{ ...props }
		>
			<SwitchPrimitive.Thumb
				className={ cn(
					'pointer-events-none block h-[18px] w-[18px] rounded-full bg-white ring-0 transition-transform',
					'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
				) }
			/>
		</SwitchPrimitive.Root>
	);
}