// @design-system: primitives/Switch
// Registered at /design-system#switch-primitive - Phase 3 (Agent 3E) will render the gallery.

import * as RadixSwitch from '@radix-ui/react-switch';
import { cn } from '@/lib/cn';

/** Props for the Switch component */
export type SwitchProps = React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>;

/**
 * Multideal Switch primitive - wraps Radix Switch.
 *
 * @example
 * ```tsx
 * <Switch id="notifications" checked={enabled} onCheckedChange={setEnabled} />
 * ```
 */
export function Switch({ className, ...props }: SwitchProps) {
  return (
    <RadixSwitch.Root
      className={cn(
        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center',
        'rounded-full border-2 border-transparent',
        'transition-colors',
        'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
        'disabled:cursor-not-allowed disabled:opacity-50',
        'bg-neutral-200',
        'data-[state=checked]:bg-brand-primary-600',
        className,
      )}
      {...props}
    >
      <RadixSwitch.Thumb
        className={cn(
          'pointer-events-none block h-5 w-5 rounded-full bg-white',
          'shadow-sm transition-transform',
          'translate-x-0',
          'data-[state=checked]:translate-x-5',
          // RTL: flip direction
          'rtl:data-[state=checked]:-translate-x-5',
        )}
      />
    </RadixSwitch.Root>
  );
}