function Toggle({ label, checked, onChange, helpText, disabled = false, id }) {
  return (
    <div className="flex items-start gap-3">
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        id={id}
        onClick={() => !disabled && onChange(!checked)}
        disabled={disabled}
        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 ${
          checked ? 'bg-indigo-600' : 'bg-slate-200'
        } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      >
        <span
          aria-hidden="true"
          className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ${
            checked ? 'translate-x-5' : 'translate-x-0'
          }`}
        />
      </button>
      {(label || helpText) && (
        <div className="flex-1 min-w-0">
          {label && (
            <label
              htmlFor={id}
              className={`block text-sm font-semibold leading-5 ${disabled ? 'text-slate-400' : 'text-slate-800'} cursor-pointer`}
              onClick={() => !disabled && onChange(!checked)}
            >
              {label}
            </label>
          )}
          {helpText && (
            <p className="text-xs text-slate-500 mt-0.5 leading-relaxed">{helpText}</p>
          )}
        </div>
      )}
    </div>
  );
}

export default Toggle;