import React from "react";

export function Switch({ checked, defaultChecked = false, onCheckedChange, disabled, className = "", ...props }) {
  const [internal, setInternal] = React.useState(defaultChecked);
  const isOn = checked !== undefined ? checked : internal;
  return (
    <button type="button" role="switch" aria-checked={isOn} disabled={disabled}
      className={["o-switch", className].filter(Boolean).join(" ")} data-slot="switch" data-checked={isOn ? "" : undefined}
      onClick={() => { if (checked === undefined) setInternal(!isOn); if (onCheckedChange) onCheckedChange(!isOn); }} {...props}>
      <span className="o-switch__thumb" data-slot="switch-thumb" />
    </button>
  );
}
