import { __ } from "@wordpress/i18n";

/**
 * スタイル付きトグルボタンコンポーネント
 * OFF/ONのセグメントボタン形式
 */
const StyledToggle = ({ label, checked, onChange }) => {
  return (
    <div className="zenblocks-styled-toggle">
      <span className="zenblocks-styled-toggle__label">{label}</span>
      <div className="zenblocks-styled-toggle__buttons">
        <button
          type="button"
          className={`zenblocks-styled-toggle__button${!checked ? " is-active" : ""}`}
          onClick={() => onChange(false)}
        >
          {__("OFF", "zenblocks")}
        </button>
        <button
          type="button"
          className={`zenblocks-styled-toggle__button${checked ? " is-active" : ""}`}
          onClick={() => onChange(true)}
        >
          {__("ON", "zenblocks")}
        </button>
      </div>
    </div>
  );
};

export default StyledToggle;
