"use client";

import { Switch as SwitchPrimitive } from "@base-ui/react/switch";

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

/**
 * On/off switch (availability toggles, notification preferences, active/inactive
 * settings). Distinct from `Toggle`, which is a pressed-state button.
 *
 * Track: 40x24, checked = primary blue, unchecked = input border color.
 * The thumb travel flips automatically in Arabic via the `rtl:` variant.
 */
function Switch({ className, ...props }: SwitchPrimitive.Root.Props) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer inline-flex h-6 w-10 shrink-0 items-center rounded-full border border-transparent p-0.5 transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-primary-blue data-unchecked:bg-border",
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className="pointer-events-none block size-5 rounded-full bg-white shadow-sm transition-transform data-checked:translate-x-4 data-unchecked:translate-x-0 rtl:data-checked:-translate-x-4"
      />
    </SwitchPrimitive.Root>
  );
}

export { Switch };