/**
 * Setting Toggle — label + helper text + canonical toggle in a row layout.
 * See styles/components/_toggle.css.
 */

import ProrankToggleSlider from './ProrankToggleSlider';
import * as React from 'react';

interface SettingToggleProps {
  label: string;
  helpText?: string;
  checked: boolean;
  onChange: (value: boolean) => void;
  disabled?: boolean;
  className?: string;
}

const SettingToggle: React.FC<SettingToggleProps> = ({
  label,
  helpText,
  checked,
  onChange,
  disabled = false,
  className = '',
}) => {
  return (
    <div className={`prorank-toggle-row ${className}`.trim()}>
      <div className="prorank-toggle-label">
        <strong>{label}</strong>
        {helpText && <span>{helpText}</span>}
      </div>
      <ProrankToggleSlider
        checked={checked}
        onChange={onChange}
        disabled={disabled}
      />
    </div>
  );
};

export default SettingToggle;