import {
  VisuallyHidden
} from "./chunk-PRZRE6A5.js";

// src/components/Switch/Switch.tsx
import {
  useState,
  useEffect
} from "react";
import classNames from "classnames/dedupe";
import "@simplybusiness/mobius/src/components/Switch/Switch.css";
import { jsx, jsxs } from "react/jsx-runtime";
var Switch = ({ ref, ...props }) => {
  const {
    checked = false,
    className,
    onChange,
    isDisabled = false,
    ...otherProps
  } = props;
  const [enabled, setEnabled] = useState(checked);
  useEffect(() => {
    setEnabled(checked);
  }, [checked]);
  const classes = classNames(
    "mobius",
    "mobius-switch",
    {
      "mobius-switch--checked": enabled,
      "mobius-switch--disabled": isDisabled
    },
    className
  );
  const handleChange = (event) => {
    setEnabled(!enabled);
    if (onChange) {
      onChange(event);
    }
  };
  return /* @__PURE__ */ jsxs("label", { ref, className: classes, children: [
    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { children: enabled ? "On" : "Off" }) }),
    /* @__PURE__ */ jsx(
      "input",
      {
        type: "checkbox",
        role: "switch",
        checked: enabled,
        onChange: handleChange,
        disabled: isDisabled,
        ...otherProps
      }
    ),
    /* @__PURE__ */ jsx("span", { className: "mobius-switch__slider" })
  ] });
};
Switch.displayName = "Switch";

export {
  Switch
};
//# sourceMappingURL=chunk-GTUHDXPT.js.map
