/**
 * Switch Component
 *
 * Wrapper around Radix UI Switch for consistent styling.
 */

import * as RadixSwitch from "@radix-ui/react-switch";

interface SwitchProps {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  disabled?: boolean;
  className?: string;
  /** Use compact size for floating panels. "sm" is an alias for "compact" */
  size?: "default" | "compact" | "sm";
}

export function Switch({
  checked,
  onCheckedChange,
  disabled = false,
  className = "",
  size = "default",
}: SwitchProps) {
  const isCompact = size === "compact" || size === "sm";

  const rootClass = isCompact ? "floating-settings__switch" : "settings-switch";

  const thumbClass = isCompact
    ? "floating-settings__switch-thumb"
    : "settings-switch-thumb";

  return (
    <RadixSwitch.Root
      className={`${rootClass} ${className}`}
      checked={checked}
      onCheckedChange={onCheckedChange}
      disabled={disabled}
    >
      <RadixSwitch.Thumb className={thumbClass} />
    </RadixSwitch.Root>
  );
}

export default Switch;
