import { useId } from "preact/hooks";
import { text } from "../lib/config";

/** Pill with an accessible switch: "Only differences [on/off]". */
export function OnlyDiffSwitch({ checked, onToggle }) {
  const id = useId();

  return (
    <div className="pcfw-switch">
      <span id={id} className="pcfw-switch__label">
        {text("onlyDiff", "Only differences")}
      </span>
      <button
        type="button"
        role="switch"
        aria-checked={checked ? "true" : "false"}
        aria-labelledby={id}
        className="pcfw-switch__control"
        onClick={onToggle}
      >
        <span className="pcfw-switch__thumb" />
      </button>
    </div>
  );
}